CSS 如何创建 div 以填充页眉和页脚 div 之间的所有空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/206652/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create div to fill all space between header and footer div
提问by Jeremy
I'm working on moving from using tables for layout purposes to using divs (yes, yes the great debate). I've got 3 divs, a header, content and footer. The header and footer are 50px each. How do I get the footer div to stay at the bottom of the page, and the content div to fill the space in between? I don't want to hard code the content divs height because the screen resolution can change.
我正在努力从使用表格进行布局转变为使用 div（是的，是的大辩论）。我有 3 个 div，一个页眉、内容和页脚。页眉和页脚各为 50 像素。如何让页脚 div 停留在页面底部，而内容 div 填充两者之间的空间？我不想硬编码内容 divs 高度，因为屏幕分辨率可能会改变。
采纳答案by Reggie Pinkham
Flexbox solution
弹性盒解决方案
Using flex layout we can achieve this while allowing for natural height header and footer. Both the header and footer will stick to the top and bottom of the viewport respectively (much like a native mobile app) and the main content area will fill the remaining space, while any vertical overflow will be scrollable within that area.
使用 flex 布局我们可以实现这一点，同时允许自然高度的页眉和页脚。页眉和页脚将分别粘在视口的顶部和底部（很像原生移动应用程序），主要内容区域将填充剩余空间，而任何垂直溢出都将在该区域内滚动。
HTML
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
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;
}
回答by Jeremy
To summarize (and this came from the CSS Sticky Footerlink provided by Traingamer), this is what I used:
总结一下（这来自Traingamer 提供的CSS Sticky Footer链接），这就是我使用的：
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>
回答by Traingamer
To expand on Mitchel Sellers answer, give your content div height: 100% and give it a auto margin.
要扩展 Mitchel Sellers 的答案，请给您的内容 div 高度：100% 并给它一个自动边距。
For a full explanation and example, see Ryan Fait's CSS Sticky Footer.
如需完整的解释和示例，请参阅 Ryan Fait 的CSS Sticky Footer。
Since you know the size (height) of your header, put it inside the content div (or use margins).
由于您知道标题的大小（高度），请将其放在内容 div 内（或使用边距）。
Position absolute will give you problems if your content is larger (taller) than the window.
如果您的内容比窗口大（高），绝对位置会给您带来问题。
回答by Allen
A way to do this using CSS Grid:
一种使用 CSS Grid 执行此操作的方法：
index.html
索引.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<body>
<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main>
</body>
</html>
main.css
主文件
body {
margin: 0;
}
main {
height: 100%;
display: grid;
grid-template-rows: 100px auto 100px;
}
section {
height: 100%;
}
回答by Mitchel Sellers
if you are trying to maximize the height of your content div, in the CSS add
如果您想最大化内容 div 的高度，请在 CSS 添加
height: 100%;
高度：100%；
回答by Andy Brudtkuhl
#footer {
clear: both;
}
