100％Div高度问题

我有两个容器（main-container和sub-container）。 body，HTML和主容器的高度为100%，sub-container固定在1000px。即使sub-container大或小，主容器在整个屏幕上的高度应与100%相适应。现在的问题是，主容器不是根据子容器高度增加其高度。请检查下面的示例以了解我的要求。100％Div高度问题

真的很感谢你的帮助。

谢谢

来源

2012-05-26 Awais Imran

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

希望它能帮助！

来源

2012-05-26 14:36:42 Luis

不，如果您在http://jsfiddle.net/awaises/dLeHL/上向下滚动，您会注意到红框在蓝框后面被切掉。我希望红盒子可以根据蓝盒子的高度灵活调整，并且100％垂直贴合在屏幕上，甚至是小盒子或大盒子的蓝盒子。 –

哦，我没有更新代码，抱歉，它现在在那里 – Luis

为了使HTML 100％做到了这一招......感谢luis – Ravi

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

编辑：

百分比高度规则解释here：

百分比高地如果一个元素的高度设定为一个百分比，它的父元素需要设置高度。换句话说，父元素的高度不能设置为auto。像许多CSS的一样，起初有点混乱。

来源

2012-05-26 14:41:25 Helstein

感谢您的回复。但是当我在.sub容器中将高度1000px更改为100％时，它消失了。任何解决方案 –

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

.main-container { background:red; }

如果您需要的主容器总是至少是屏幕的高度，用@设置min-height至100％，而去除height设置Helstein的建议。

来源

2012-05-26 14:45:38

100％Div高度问题

回答

相关问题