Question

如果我有以下标记

<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>

具有以下样式

html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}

为什么我的html，body和wrapper元素不会扩展到FF13中浏览器/视图端口的100％高度。在查看Firebug时，html，body和wrapper从底部垂直停止一段距离。容器div延伸到整个高度，因为它的高度由内容决定。

（1263px X 558px用于html，正文，包装）和（960px X 880px用于容器）

默认情况下，100％会出现以上情况，如下图所示。但是当我放大到最后一次放大时，上面的图像不会显示，因为下面的第二张图片显示并且html，body，wrapper延伸到整个高度。

（4267px X 1860px for html，body，wrapper） - （960px X 1000px for container）

enter image description here

Answer 1

因为如果元素相对于浏览器窗口，您永远不能将高度设置为100％。原因在于，由于滚动，您的浏览器窗口可能会无限大。你必须设置一个固定的高度，否则你只需要设置高度就可以扩展到它内部的任何高度。

但width: 100%;完全有效。

您还需要使用有效的html标记。我会做的是，而不是使用＆lt; wrapper＆gt;和＆lt; container＆gt;，我会在你的CSS中创建一个类。类名是通过以句点开始声明的。

.container{
width: 100%;
}

<div class="container"></div>

祝你好运，

-Brian