CSS - 带有页眉和页脚的 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17054158/
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
CSS - 100% Height with Header and Footer
提问by Sequenzia
I am trying to design a page with a header, a main div that stretches to 100% of the vertical landscape (minus header and footer) and a footer. Like this pic:
我正在尝试设计一个带有页眉的页面，一个主 div 延伸到 100% 的垂直横向（减去页眉和页脚）和一个页脚。像这张图：
I can get the header and main div to work. Like this:
我可以让标题和主 div 工作。像这样：
<div id="wrapper">
<div class="header_div">HEADER</div>
<div class="main_div">MAIN</div>
<div class="footer_div">FOOTER</div>
</div>
With this CSS:
使用这个 CSS：
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.header_div{
height: 40px;
width: 100%;
background-color: #000000;
}
.main_div{
margin-bottom:40px;
margin-top:40px;
position:absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color: red;
}
.footer_div{
position: relative;
height: 40px;
width: 100%;
background-color: blue;
}
So the main div starts 40px off the top to account for the header and then stops 40px from the bottom to account for the footer. This works well but I cannot get the footer div to show below the main div. The way it is now with position: relativeit's putting the footer on top of the main div. If I use position:absoluteit puts it underneath the main div.
所以主 div 从顶部 40px 开始以占页眉，然后在距底部 40px 处停止以占页脚。这很有效，但我无法让页脚 div 显示在主 div 下方。现在的方式是position: relative将页脚放在主 div 的顶部。如果我使用position:absolute它把它放在主 div 的下面。
I am sure I am just doing this wrong because CSS is not my thing.
我确信我只是做错了，因为 CSS 不是我的菜。
Any help on this would be great.
对此的任何帮助都会很棒。
Thanks
谢谢
回答by Roko C. Buljan
Using CSS3 Flexbox:
使用 CSS3弹性盒：
/*QuickReset*/*{margin:0;box-sizing:border-box;}
body { /* body - or any parent wrapper */
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>回答by FabianW
Use the css calc() function.
使用 css calc() 函数。
With this method, you don't have to define the position of the elements
使用此方法，您不必定义元素的位置
Here is a demo
这是一个演示
html:
html：
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
css:
css：
html, body {
height: 100%
}
body {
color: #FFF;
padding: 0;
margin: 0;
}
header {
background-color: #000;
height: 100px;
}
main {
background-color: #AAA;
height: calc(100% - 150px);
}
footer {
background-color: #000;
height: 50px;
}
回答by Michael Lawrie
Here's a simple method. Try this jsfiddle: http://jsfiddle.net/PejHr/
这里有一个简单的方法。试试这个 jsfiddle：http: //jsfiddle.net/PejHr/
HTML:
HTML：
<div id="top"></div>
<div id="main">
<div id="inner"></div>
</div>
<div id="bottom"></div>
CSS:
CSS：
#main {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
padding: 50px 0px
}
#inner {
width: 100%;
height: 100%;
background: #f0f;
}
#top, #bottom {
width: 100%;
height: 50px;
background: #333;
position: absolute;
top: 0px;
left: 0px;
}
#bottom {
bottom: 0px;
}
