Question

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

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

P.S。 - 所有div都在一个容器中。所有包含div的高度都是：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确实服从高度：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; }

填充剩余的垂直空间

3 个答案: