Html CSS - 页眉 - 总是底部页脚和 100% 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4884636/
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 - header - always bottom footer and 100% content
提问by David Horák
<body>
<div id="wrap">
<div id="header">
HEADER
</div>
<div id="inner-wrap">
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOTTER
</div>
</div> </body>
AND CSS:
和 CSS：
html { height:100%; max-height:100%; }
body {
margin:0;
padding:0;
height:100%;
max-height: 100%;
}
#wrap {
min-height:100%;
height: 100%;
position:relative;
}
* html #wrap { height:100% }
#inner-wrap {
padding-bottom:50px;
min-height: 100%;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
* html #inner-wrap {
height:100%;
}
#header
{
width: 100%;
background-color: #C0C0C0;
height: 16px;
color: White;
text-align: center;
position: relative;
top:0px;
}
#footer
{
width: 100%;
background-color: #C0C0C0;
height: 50px;
position:absolute;
bottom: 0;
color: White;
text-align: center;
}
#content
{
width: 1000px;
height: 100%;
background-color: #F5FDEC;
margin: 0 auto 0 auto;
}
The Problem:
问题：
How i can make this: HEADER top 16px, CONTENT dynamic 100% height, FOOTER at end of page
我如何做到这一点：页眉顶部 16 像素，内容动态 100% 高度，页尾页脚
If i give 100% to inner-wrap DIV, them after footer is white space.
如果我 100% 给内包装 DIV，它们在页脚之后是空白。
Thx
谢谢
采纳答案by Kyle
You have too many heights going on:
你有太多的高度：
Remove the min-heightand max-heightvalues from your selectors.
从选择器中删除min-height和max-height值。
Remove the position: absolute; from your #wrapdiv.
删除position: absolute; 从你的#wrapdiv。
I made an example for you here.
我在这里为你做了一个例子。
回答by Fabio
For the footer positioned at the bottom in a fixed position that doesn't move when you scroll the webpage use this:
对于位于底部的固定位置的页脚，滚动网页时不会移动，请使用以下命令：
#footer{
position:fixed;
clear:both;
}
