如何使元素的高度等于屏幕的高度？

Question

我尝试了height: auto;，但这不起作用。有什么想法吗？

Answer 1

html, body { height: 100%; }
#container { height: 100%; background: red; width: 200px; }

这是你想要做的吗？请提供一些代码。

Answer 2

您有几个选择。你可以这样做：

.element{
    position:absolute;
    top:0px;
    right:0px;
    left:0px;
    bottom:0px;
}

这样，第一个父元素的每一边都是0px，其位置不是静态的。如果它是页面上的第一个元素，它将填充整个文档正文。

请看这里发生的事情：http://jsfiddle.net/4QH8H/embedded/result/

http://jsfiddle.net/4QH8H/light/

你也可以这样做：

.element{

    height:100%;
    width:100%;

}

虽然，这些属性只会使它与父元素一样高和宽，有时主体只会环绕内容而不会填充页面，所以你必须这样做：

html, body{

    height:100%;
    width:100%;

}