web-dev-qa-db-ja.com

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

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

体が見る範囲全体を最低限使い切って欲しいです。フッターとヘッダーを常に画面に表示したい

htmlcsscss-positionsticky-footer
18
Arcadian

私はjsfiddleで例を作成しました：

更新された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;
}

Border-boxがない場合、コンテンツは高さ100％+ 140pxのパディングになります。ボーダーボックスを使用すると、コンテンツの高さが100％になり、パディングが内側になります。

15
WolvDev

Andreas Winterソリューションの修正：

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

*その解決策では、コンテンツが使用可能なウィンドウ領域よりも大きい場合に問題が発生します。

4
Oswaldo Acauan

あなたが探しているのは「複数の絶対座標」だと思います。 List Apartには説明があります 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 は、テクニックをよりきれいな方法で示しています。

3
Dan Dascalescu