如何创builddiv来填充页眉和页脚div之间的所有空间
我正在从使用表格布局的目的，使用div（是的，是的伟大的辩论）。 我有3个div，一个标题，内容和页脚。 页眉和页脚是每个50px。 我如何获得页脚div留在页面底部，内容div填补之间的空间？ 我不想硬编码的内容divs的高度，因为屏幕分辨率可以改变。
总结（这是来自Traingamer提供的CSS粘性页脚链接），这是我使用的：
html, body { height: 100%; } #divHeader { height: 100px; } #divContent { min-height: 100%; height: auto !important; /*Cause footer to stick to bottom in IE 6*/ height: 100%; margin: 0 auto -100px; /*Allow for footer height*/ vertical-align:bottom; } #divFooter, #divPush { height: 100px; /*Push must be same height as Footer */ } <div id="divContent"> <div id="divHeader"> Header </div> Content Text <div id="divPush"></div> </div> <div id="divFooter"> Footer </div> Flexbox解决scheme
使用柔性布局，我们可以实现这一点，同时允许自然的高度页眉和页脚。 页眉和页脚将分别粘贴到视口的顶部和底部（很像本机移动应用程序），主内容区域将填充剩余空间并可滚动。
见JS小提琴
HTML
<body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body>
CSS
html, body { margin: 0; height: 100%; min-height: 100%; } body { display: flex; flex-direction: column; } header, footer { flex: none; } main { overflow-y: scroll; -webkit-overflow-scrolling: touch; flex: auto; }
要扩大Mitchel卖家的答案，给你的内容股高：100％，并给它一个汽车保证金。
有关完整的解释和示例，请参阅Ryan Fait的CSS粘滞页脚 。
既然你知道你的头的大小（高度），把它放在内容div（或使用边距）。
如果你的内容比窗口大（高），绝对位置会给你带来问题。
如果你试图最大化你的内容div的高度，在CSS添加
身高：100％
#footer { clear: both; }
