使主体 100% 浏览器窗口的高度
Posted
技术标签:
【中文标题】使主体 100% 浏览器窗口的高度【英文标题】：Make body 100% height of browser window 【发布时间】：2012-12-14 14:00:33 【问题描述】：我有这个结构：
<body>
<div id="header">..</div>
<div id="content">..</div>
<div id="footer">..</div>
</body>
还有这个 CSS：
身体 白颜色; 字体家族：“播放”，无衬线； 最大宽度：2560px； 边距：0 自动； 最小宽度：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%; width: 100%; ？
可能重复***.com/questions/1575141/...
【参考方案1】：
添加：
html
height: 100%;
到你的 CSS。
在此处查看更新 - http://jsfiddle.net/xkTpV/4/
【讨论】：
@SlaythernAareonna 那你为什么把它标记为已解决？我更喜欢使用height: 100vh;，它使用视口高度。【参考方案2】：
为了让它工作。您必须使父 <html> 和子 <body> 都具有 100% 的高度。
html, body
height:100%; /*both html and body*/
body
margin: 0; /*reset default margin*/
【讨论】：
【参考方案3】：尝试高度：100vh；
body color: white; font-family: 'Play', sans-serif; max-width: 2560px; margin: 0; min-width: 960px; height:100vh; padding:0;
【讨论】：
以上是关于使主体 100% 浏览器窗口的高度的主要内容，如果未能解决你的问题，请参考以下文章