+-------------------+
| Top (fixed) |
+-------------------+
| |
| |
| Middle (fill) |
| |
| |
+-------------------+
| Bottom (fixed) |
+-------------------+
上下は固定divです。これらは、ブラウザ ウィンドウの上部と下部に配置されます。上部の div と下部の div の間のウィンドウの残りの部分を中央部分で埋めたいと思います。
コンテンツが高さを超えている場合は、スクロールバーを使用できます。ただし、そのサイズはウィンドウを超えてはなりません。
私のCSSとHTML:
html, body, #main
{
height: 100%;
}
#content
{
background: #F63;
width: 100%;
overflow: auto;
height: 100%;
margin-bottom: -100px;
}
#footer
{
position: fixed;
display: block;
height: 100px;
background: #abcdef;
width: 100%;
}
<div id="main">
<div id="content">xyz</div>
<div id="footer">abc</div>
</div>
これから、フッターは下部に表示されますが、コンテンツ div は [window-footer] の高さである必要があるウィンドウ全体をまだ埋めています。