填充剩余的垂直空间答案

【问题标题】：Filling remaining vertical space填充剩余的垂直空间
【发布时间】：2013-03-12 21:37:03
【问题描述】：

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

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

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

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

【问题讨论】：

这是我之前问过的：stackoverflow.com/questions/15376558/…

标签： css fill

【解决方案1】：

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

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

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

【讨论】：

如果你上网搜索，你可能会发现专家严禁在 CSS 中进行计算。
专家建议在CSS中进行计算，但是在js中创建一个fallback，以防浏览器不支持css计算...

【解决方案2】：

您确实需要发布您的 html。

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

html, body{
  height:100%;
}

【讨论】：

【解决方案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; }

【讨论】：