100% Div 高度问题

Question

我有两个容器（main-container 和 sub-container）。Body、HTML 和 main-container 的高度都是100％，而sub-container的高度固定为1000px。即使sub-container很小或很大，main-container也应该适合整个屏幕的100%高度。现在的问题是，main-container的高度不会根据sub-container的高度增加。请查看下面的示例以了解我的要求。

http://jsfiddle.net/awaises/dLeHL/

非常感谢您的帮助。

谢谢

- Awais Imran

Answer 1

将.main-container中的height:100%;更改为min-height:100%;：http://jsfiddle.net/dLeHL/3/ 编辑：

百分比高度规则在这里有详细解释：http://www.dynamicsitesolutions.com/css/height-and-min-height/：

引用：

百分比高度：如果元素的高度设置为百分比，其父元素需要设置固定高度。换句话说，父元素的高度不能设置为auto。就像CSS的许多方面一样，这可能一开始有点令人困惑。

- Helstein

---

谢谢你的回复。但是当我把.sub-container中的高度从1000像素改为100%时，它消失了。有什么解决办法吗？ - Awais Imran

Answer 2

您是否想要实现的是这个效果？

我改变了.sub-container的宽度，以使其与.main-container一样使用百分比。

CSS代码：

html, body { 
    height:100% 
}
.main-container { 
    height:100%; 
    background:red; 
}
.sub-container { 
    height:100%; 
    width:75%; 
    margin:0 auto; 
    background:blue; 
}

希望能对您有所帮助！

- Luis

---

不，如果你在http://jsfiddle.net/awaises/dLeHL/网页上向下滚动，你会发现红色框被蓝色框遮挡了。我希望红色框能够根据蓝色框的高度灵活调整，并且在屏幕上垂直100%适应，无论蓝色框大小如何。 - Awais Imran

Answer 3

您不需要为.main-container设置高度（默认情况下，它将扩展到子容器的大小）。通过将高度设置为100％，您正在强制其成为屏幕的高度，而不再是更多。因此，请将其更改为：

.main-container { background:red; }

如果你需要主容器始终至少与屏幕高度相同，可以使用@Helstein的建议，将min-height设置为100%，同时删除height设置。

- Chris Van Opstal