填充剩余的垂直空间

重新设计我的网站，在我的CSS我有一个高度的div：200px;然后下一个图像高度：532px;然后最后一个高度的div：100％;.填充剩余的垂直空间

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

P.S. - 所有的div都在一个容器中。所有包含div的高度为：100％;

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

来源

2013-03-22 Despyse

这就是我问过：http://stackoverflow.com/questions/15376558/how-to-fill-100-of-remaining-height – 2013-03-23 01:09:53

你真的需要发布你的html。

我怀疑你所遇到的问题可以通过设置html和body标签的高度为100％来解决。如：

html, body{ 
    height:100%; 
}

来源

2013-03-22 22:15:27 Lewis

首先，您需要设置html和body的高度为100％。然后，如果你想覆盖页面的其余部分与该分区，你应该这样做：

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

希望这将有助于....

来源

2013-03-22 22:15:43 hjuster

谢谢你的提示！ – Despyse 2013-03-23 02:21:48

如果您搜索互联网，您可能会发现专家严格禁止在CSS中进行计算。 – 2014-04-30 13:01:08

专家建议在CSS中进行计算，但要在js中创建回退，以防浏览器不支持css calc ... – hjuster 2014-07-17 16:17:13

如果股利确实服从高度：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; }

来源

2013-03-22 22:20:56

填充剩余的垂直空间

回答

相关问题