html - 使包装器适合 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% }