使浏览器窗口的身体达到100%的高度
我有这样的结构:
<body>
<div id="header">..</div>
<div id="content">..</div>
<div id="footer">..</div>
</body>
而这个CSS:
身体{颜色:白色; font-family:'Play',sans-serif; max-width:2560px; 保证金:0汽车; min-width:960px; 高度:100%; 填充:0; }
#header {
position: relative;
overflow: hidden;
margin: 0 auto;
min-width: 960px;
height: 95px;
background-image: url("../images/header-bg.png");
}
#content {
margin: 0 auto;
position: relative;
max-width: 1600px;
height:100%;
overflow:hidden;
}
#footer {
background-color: #009EDB;
background-image: url("../images/footer-bg.png");
bottom: 0;
height: 30px;
margin: 0;
position: relative;
width: 100%;
}
但不是body
高度的浏览器窗口100%。 我的问题是什么? 谢谢。
的jsfiddle
加:
html {
height: 100%;
}
到你的CSS。
点击此处查看更新 - http://jsfiddle.net/xkTpV/4/
为了使它工作。 您必须使父母<html>
和孩子<body>
都具有100%的身高。
html, body {
height:100%; /*both html and body*/
}
body {
margin: 0; /*reset default margin*/
}
链接地址: http://www.djcxy.com/p/75587.html