CSS - 页眉 - 总是底部页脚和100％的内容 [英] CSS - header - always bottom footer and 100% content
本文介绍了CSS - 页眉 - 总是底部页脚和100％的内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<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：
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;
}
问题：
我可以做到这一点：HEADER top 16px，
CONTENT动态100％高度，
页面末尾
How i can make this: HEADER top 16px, CONTENT dynamic 100% height, FOOTER at end of page
如果我给100
Thx
推荐答案
您的高度太高：
删除 min-height 和 max-height 值。
删除 position：absolute ;从 #wrap div。
I made an example for you here.
这篇关于CSS - 页眉 - 总是底部页脚和100％的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
