css - 100% div 高度问题

Question

我有两个容器（main-container和sub-container）。正文、HTML 和主容器具有100%高度类，而sub-container固定在1000px. 主容器无论大小都应与100%整个屏幕的高度相适应sub-container。现在的问题是，主容器没有根据子容器的高度增加它的高度。请检查下面的示例以了解我的要求。

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

非常感谢您的帮助。

谢谢

Answer 1

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

编辑：

百分比高度规则在这里解释：

百分比高度 如果元素的高度设置为百分比，则它的父元素需要设置高度。换句话说，父元素的高度不能设置为自动。像 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

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

.main-container { background:red; }

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