html - 使 wrapper 适合 100% 的宽度和高度

Question

我想创建一个适合浏览器视口(viewport)的整个高度和宽度的 div。我只是想过简单的 css，比如:

#wrapper { width: 100%;
           height: 100%;
           background-color: red;
}

但它不适用于高度。 #wrapper 没有任何高度。为什么？

提前致谢。

Answer 1

#wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: red;
}

http://fiddle.jshell.net/zDuWh/

或

html, body { height: 100% }

#wrapper {
    width: 100%;
    height: 100%;
    background-color: red;
}

http://fiddle.jshell.net/VJv6h/