[英]100% Div Height Issue
I have two containers ( main-container
and sub-container
). 我有两个容器( main-container
和sub-container
)。 Body, HTML and main-container have classes of 100%
height whereas sub-container
fixed in 1000px
. Body,HTML和main-container具有100%
高度的类,而sub-container
固定为1000px
。 Main-container should be fit with 100%
height in the whole screen even sub-container
is small or large. 主容器应在整个屏幕中适合100%
高度,即使sub-container
小或大。 Now problem is, main-container is not increasing its height according to sub-container height. 现在的问题是,主容器没有根据子容器高度增加其高度。 Please check the example below to understand my requirement. 请查看以下示例以了解我的要求。
http://jsfiddle.net/awaises/dLeHL/ http://jsfiddle.net/awaises/dLeHL/
Really appreciate your help. 非常感谢您的帮助。
Thanks 谢谢
change height:100%;
改变height:100%;
to min-height:100%;
min-height:100%;
in .main-container
: http://jsfiddle.net/dLeHL/3/ 在.main-container
: http : //jsfiddle.net/dLeHL/3/
EDIT: 编辑:
Percentage heights rules are explained here : 此处说明了百分比高度规则:
Percentage Heights If the height of an element is set to a percentage, it needs for its parent element to have a set height. 百分比高度如果元素的高度设置为百分比,则其父元素需要具有设置的高度。 In other words, the height of the parent element can't be set to auto. 换句话说,父元素的高度不能设置为auto。 Like many aspects of CSS, this is a bit confusing at first. 像CSS的许多方面一样,这开始有点令人困惑。
Is this what you're trying to achieve? 这是你想要实现的目标吗?
I change the width of the .sub-container
in order to be in %
like the .main-container
. 我更改.sub-container
的宽度,以便像.main-container
一样在%
。
CSS markup: CSS标记:
html, body {
height:100%
}
.main-container {
height:100%;
background:red;
}
.sub-container {
height:100%;
width:75%;
margin:0 auto;
background:blue;
}
Hope it helps! 希望能帮助到你!
You don't need to set the height
for the .main-container
(by default it will expand to the size of the child container). 您不需要为.main-container
设置height
(默认情况下,它将扩展为子容器的大小)。 By setting the height to 100% you are forcing it to be the height of the screen and no more. 通过将高度设置为100%,您将强制它成为屏幕的高度而不再是。 So just change it to: 所以只需将其更改为:
.main-container { background:red; }
If you need the main container to always be at least the height of the screen, use @Helstein's suggestion of setting the min-height
to 100% while removing the height
setting. 如果您需要主容器始终至少达到屏幕的高度,请使用@Helstein建议在删除height
设置时将min-height
设置为100%。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.