适合100％宽度和高度的包装

Question

我想创建一个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/

Answer 2

这个怎么样： -

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

或

html { height: 100% }
body { height: 100% }