ヘッダーとフッターの間のDIVの高さを100％にする方法

ヘッダーが50px、本文が100％、フッターが50pxになるようにレイアウトを設定する方法はありますか？ヘッダーとフッターの間のDIVの高さを100％にする方法

身体を最小限にして表示領域全体を使いたいと思います。私はjsfiddleで例を作成し、すべての回で、画面上にあるように

出典

2012-04-19 Arcadian

http://stackoverflow.com/questions/6158975/css-100-height-layout – Samich

体内のコンテンツが画面の高さをオーバーフローさせた場合、どのような動作が必要ですか？ – bendataclear

をフッターとヘッダーを持っているしたいと思います：

UPDATED JsFiddle：http://jsfiddle.net/5V288/1025/

HTML：

<body> 
    <div id="header"></div> 
    <div id="content"><div> 
     Content 
    </div></div> 
    <div id="footer"></div> 
</body>

CSS ：

html { height: 100%; } 
body { 
    height:100%; 
    min-height: 100%; 
    background: #000000; 
    color: #FFFFFF; 
    position:relative; 
} 
#header { 
    height:50px; 
    width:100%; 
    top:0px; 
    left:0px; 
    background: #CCCCCC; 
    position:fixed; 
} 
#footer { 
    height:50px; 
    width:100%; 
    bottom:0px; 
    left:0px; 
    background: #CCCCCC; 
    position:fixed; 
} 
#content { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    height:100%; 
    padding: 0 20px; 
} 
#content > div { 
    padding: 70px 0; 
}

コンテンツがhei ght 100％+ 140pxパディングボーダーボックスでは、コンテンツの高さは100％になり、パディングは内側になります。

出典

2012-04-19 12:56:38 WolvDev

JSFiddleが利用できない場合は、[ここにいくつかのコードを含める]（http://stackoverflow.com/a/12907900/1269037）が良いでしょう。 BTW、 'box-sizing：border-box;'は何の違いもないようです。 –

border-boxなしでは、内容は高さ100％+ 140pxのパディングになります。ボーダーボックスでは、コンテンツの高さは100％になり、パディングは内側になります。 – WolvDev

スクロールすると動作しません。フッターはコンテンツとともにスクロールします。 – Roaders

ただ、アンドレアス・ウィンター・ソリューションのための修正：コンテンツが利用可能窓の面積よりも大きい場合

http://jsfiddle.net/5V288/7/

*それのソリューションを使用すると、問題を持っているでしょう。

出典

2012-04-19 13:17:44

ありがとうございます - 私は、スクロール可能な100％の中央領域で固定ヘッダーとフッターで苦労していました。これは完璧です、今はEPICのレイアウトを持つことができます！^__^ – Jason

yayyyyyyy、あなたを助けてうれしいです：3 –

あなたが探しているのは「複数の絶対座標」だと思います。一覧は別に説明hereを持っていますが、基本的に、あなただけの絶対的なように、身体の位置を指定し、top: 50pxとbottom: 50pxの両方を設定する必要があります。

<body> 
<style> 
#header { 
    position: absolute; 
    height: 50px; 
} 

#body {  
    position: absolute; 
    top: 50px; 
    bottom: 50px; 
    background-color: yellow; 
} 

#footer { 
    position:absolute; 
    height: 50px; 
    bottom: 0; 
} 
</style> 
<div id="header">Header</div> 
<div id="body">Content goes here</div> 
<div id="footer">Footer</div>

http://www.spookandpuff.com/examples/absoluteCoordinates.htmlはきれいな方法で技術を示しています。

出典

2012-10-16 05:12:00

ヘッダーとフッターの間のDIVの高さを100％にする方法

答えて

関連する問題