Html 如何使页眉和页脚之间的 DIV 高度为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10228280/
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 make DIV height 100% between header and footer
提问by Arcadian
Is there a way to setup a layout so that the header is 50px, body is 100% and footer is 50px?
有没有办法设置布局，使页眉为 50 像素，正文为 100%，页脚为 50 像素？
I would like the body to use up the entire viewing area at minimum. I would like to have the footer and header to be on the screen at all times
我希望身体至少用完整个观看区域。我希望页脚和页眉始终在屏幕上
采纳答案by WolvDev
I created an example in jsfiddle:
我在 jsfiddle 中创建了一个示例：
UPDATED JsFiddle: http://jsfiddle.net/5V288/1025/
更新的 JsFiddle：http: //jsfiddle.net/5V288/1025/
HTML:
HTML：
<body>
<div id="header"></div>
<div id="content"><div>
Content
</div></div>
<div id="footer"></div>
</body>
CSS:
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;
}
Without border-box the content will be height 100% + 140px padding. With the border-box the content height will be 100% and the padding will be inside.
如果没有边框框，内容将是高度 100% + 140px 填充。使用边框框，内容高度将为 100%，填充将在里面。
回答by Oswaldo Acauan
Just a fix for Andreas Winter solution:
只是对 Andreas Winter 解决方案的修复：
*With the solution of it, you would have problems if the content is greater than the available window area.
*使用它的解决方案，如果内容大于可用窗口区域，则会出现问题。
回答by Dan Dascalescu
I think what you're looking for is "multiple absolute coordinates". A List Apart has an explanation herebut basically, you just need to specify the body's position as absolute, and set both top: 50pxand bottom: 50px:
我认为您正在寻找的是“多个绝对坐标”。A List Apart在这里有一个解释，但基本上，您只需要将主体的位置指定为绝对位置，并同时设置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.htmlshows the technique in a prettier way.
http://www.spookandpuff.com/examples/absoluteCoordinates.html以更漂亮的方式展示了该技术。
