This question already has an answer here:
这个问题在这里已有答案:
- Make body have 100% of the browser height 21 answers
- Why doesn't HTML and BODY take all available height of document when min-height: 100%? [duplicate] 2 answers
让身体拥有100%的浏览器高度21个答案
当min-height:100%时,为什么HTML和BODY不占用文档的所有可用高度? [重复] 2个答案
This is how basically document looks like:
基本上这是文档的样子:
<body>
<div id="content_holder">
<div class='all_links'>
</div>
<div class="item">
<div class="notice"></div>
</div>
</div>
<div id="bottom_nav">
</div>
</body>
And CSS:
html, body {
margin: 0;
padding: 0;
min-height: 100%;
}
body{
overflow-y:scroll;
min-width: 1024px;
}
#content_holder{
min-height: 100%;
}
.item {
width: 800px;
position: relative;
top: 100px;
left: 50%;
margin-left: -400px;
text-align: center;
min-height: 100%;
}
The problem that on this specific page html, body, .item
properties about min-height doesn't work in percents.
在这个特定的页面html,body,.item属性关于min-height的问题在百分比中不起作用。
On other pages everything is OK. Parent of .item
is body. I can't get what is wrong here. When I check height with Chrome Dev Tool, body height on this page is 360px, which, of course, twice less than it shoudl be.
在其他页面上一切正常。 .item的父母是身体。我不知道这里有什么问题。当我使用Chrome Dev Tool检查高度时,此页面上的身高是360px,当然,这比它的两倍要小。
Why?
UPD: fiddle
What I've found out, that height property doesn't work specifically for #content_holder
, and works for body
我发现,高度属性不适用于#content_holder,适用于body
2 个解决方案
#1
2
Just change min-height: 100%
to height: 100%
.
只需更改最小高度:100%到高度:100%。
The height of your webpage will be 100% of the browser screen, or 100% of the content height, whichever is bigger.
您网页的高度将是浏览器屏幕的100%,或内容高度的100%,以较大者为准。
#2
1
When height
is set on any element in a percentage, it's immediate parent element must have height
specified (not as a percentage, but in px
or em
).
The weird exception to that rule is the <html>
element, which if it is given height: 100%
, an immediate child element can then have height
as a percentage (i.e. the <body>
element).
As for setting min-height: 100%
, this sets the initial size to 100% height and allows the element to exceed that height.
I'm pretty sure that min-height
also follows the same above-mentioned rule for height
-- for any element set with min-height
in a percentage, its' immediate parent element must have height
specified (not as a percentage), with the exception of the <html>
element being set with height
as a percentage.
However, if an element sets height
as a px
or em
value, and its' immediate child element sets height
as a percentage, the grandchild element's height
can be set as a percentage, and so on...
当在百分比中的任何元素上设置高度时,它的直接父元素必须指定高度(不是百分比,而是在px或em中)。该规则的奇怪例外是元素,如果给定高度:100%,则直接子元素可以具有高度百分比(即元素)。至于设置最小高度:100%,这会将初始大小设置为100%高度,并允许元素超过该高度。我很确定min-height也遵循上面提到的相同高度规则 - 对于任何具有min-height百分比的元素集,它的'直接父元素必须指定高度(不是百分比),以高度为百分比设置元素的例外情况。但是,如果元素将height设置为px或em值,并且其'immediate子元素将height设置为百分比,则可以将孙元素的高度设置为百分比,依此类推......
#1
2
Just change min-height: 100%
to height: 100%
.
只需更改最小高度:100%到高度:100%。
The height of your webpage will be 100% of the browser screen, or 100% of the content height, whichever is bigger.
您网页的高度将是浏览器屏幕的100%,或内容高度的100%,以较大者为准。
#2
1
When height
is set on any element in a percentage, it's immediate parent element must have height
specified (not as a percentage, but in px
or em
).
The weird exception to that rule is the <html>
element, which if it is given height: 100%
, an immediate child element can then have height
as a percentage (i.e. the <body>
element).
As for setting min-height: 100%
, this sets the initial size to 100% height and allows the element to exceed that height.
I'm pretty sure that min-height
also follows the same above-mentioned rule for height
-- for any element set with min-height
in a percentage, its' immediate parent element must have height
specified (not as a percentage), with the exception of the <html>
element being set with height
as a percentage.
However, if an element sets height
as a px
or em
value, and its' immediate child element sets height
as a percentage, the grandchild element's height
can be set as a percentage, and so on...
当在百分比中的任何元素上设置高度时,它的直接父元素必须指定高度(不是百分比,而是在px或em中)。该规则的奇怪例外是元素,如果给定高度:100%,则直接子元素可以具有高度百分比(即元素)。至于设置最小高度:100%,这会将初始大小设置为100%高度,并允许元素超过该高度。我很确定min-height也遵循上面提到的相同高度规则 - 对于任何具有min-height百分比的元素集,它的'直接父元素必须指定高度(不是百分比),以高度为百分比设置元素的例外情况。但是,如果元素将height设置为px或em值,并且其'immediate子元素将height设置为百分比,则可以将孙元素的高度设置为百分比,依此类推......