css - 填充剩余的垂直空间

Question

重新设计我的网站，在我的 CSS 中，我有一个高度为 200px 的 div；然后是它下面的图像，高度为：532px；最后是高度的 div: 100%;.

最后一个 div 没有填满页面的其余部分，我做错了什么吗？

PS - 所有 div 都在一个容器中。所有包含的 div 都有 height: 100%;

我已经改变了它，所以我不再需要这个。

Answer 1

首先，您需要将 html 和 body 的高度设置为 100%。然后，如果您想用该 div 覆盖页面的其余部分，您应该执行以下操作：

div{
     height: -moz-calc(100% - 732px); //732 = 200 + 532
     height: -webkit-calc(100% - 732px);
     height: calc(100% - 732px);
}

希望这会有所帮助....

Answer 2

你真的需要发布你的html。

我怀疑您遇到的问题也可以通过将 html 和 body 标签的高度设置为 100% 来解决。喜欢 ：

html, body{
  height:100%;
}

Answer 3

如果 div 确实遵守了 height: 100%，那么它将与容器具有相同的高度，与它上面的元素发生冲突。

如果不使用 Javascript 来计算高度，或者注意广泛支持的现代 CSS 扩展，您必须回退到绝对定位。唯一的缺点是您必须手动输入它的顶部。

http://jsfiddle.net/NnD2u/

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

.

.container { height: 500px; background-color: Yellow; }
.child1 { height: 200px; background-color: Green; }
.child2 { background-color: Red; }

.container { position: relative; }
.child2 { position: absolute; bottom: 0; left: 0; top: 200px; right: 0px; }