100％Div高度问题

Question

我有两个容器（ main-container和sub-container ）。 Body，HTML和main-container具有100%高度的类，而sub-container固定为1000px 。 主容器应在整个屏幕中适合100%高度，即使sub-container小或大。 现在的问题是，主容器没有根据子容器高度增加其高度。 请查看以下示例以了解我的要求。

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

非常感谢您的帮助。

谢谢

Answer 1

改变height:100%; min-height:100%; 在.main-container ： http ： //jsfiddle.net/dLeHL/3/

编辑：

此处说明了百分比高度规则：

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

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; 
}

希望能帮助到你！

Answer 3

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

.main-container { background:red; }

如果您需要主容器始终至少达到屏幕的高度，请使用@Helstein建议在删除height设置时将min-height设置为100％。