使主体 100% 浏览器窗口的高度答案

【问题标题】：Make body 100% height of browser window使主体 100% 浏览器窗口的高度
【发布时间】：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%; }？
可能重复stackoverflow.com/questions/1575141/...

标签： javascript html css

【解决方案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; }

【讨论】：