Question

我有两个容器（main-container和sub-container）。正文，HTML和主容器的高度为100%，sub-container的{{1}}为1000px。即使100%小或大，主容器也应在整个屏幕中与sub-container高度相匹配。现在的问题是，主容器没有根据子容器高度增加其高度。请查看以下示例以了解我的要求。

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

非常感谢您的帮助。

由于

Answer 1

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

编辑：

解释百分比高度规则here：

百分比高度如果元素的高度设置为百分比，它的父元素需要具有设定的高度。换一种说法，父元素的高度不能设置为auto。像许多人一样 CSS的各个方面，起初有点令人困惑。

Answer 2

this你想要实现的目标是什么？

我更改了.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

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

.main-container { background:red; }

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

100％Div高度问题

3 个答案: