使身体100%高度的浏览器窗口

Sla*_*nna 3 html javascript css

我有这个结构:

<body>

    <div id="header">..</div>

    <div id="content">..</div>

    <div id="footer">..</div>

</body>
Run Code Online (Sandbox Code Playgroud)

这个CSS:

身体{颜色:白色; font-family:'Play',sans-serif; 最大宽度: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%;

}?
Run Code Online (Sandbox Code Playgroud)

但不是body高度100%的浏览器窗口.我的问题是什么?谢谢.

的jsfiddle

Llo*_*oyd 5

加:

html {
    height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

给你的CSS.

请点击此处更新 - http://jsfiddle.net/xkTpV/4/


Sti*_*ers 5

为了使其发挥作用。您必须使父级<html>和子级<body>都具有 100% 的高度。

html, body {
    height:100%; /*both html and body*/
}
body {
    margin: 0; /*reset default margin*/
}
Run Code Online (Sandbox Code Playgroud)