最小高度屬性不起作用

這是文檔看起來多麼基本上像：最小高度屬性不起作用

<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>

和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%;

}

的問題，這個特定頁面上html, body, .item有關最小高度的屬性在百分比中不起作用。

在其他頁面上一切正常。 .item的父母是正文。我不能在這裏得到什麼錯誤。當我使用Chrome Dev Tool檢查身高時，此頁面的身高爲360px，當然比它低兩倍。

爲什麼？

UPD：fiddle

我已經找到了，這樣的高度屬性不會專門爲#content_holder工作，適用於身體

來源

2013-06-22 Joe Half Face

downvote的任何理由？ –

如果你爲這個問題製作了一個jsFiddle，它會有所幫助：http://jsfiddle.net/ –

這是一個非常令人困惑的問題。 – rkpasia

只要改變min-height: 100%到height: 100%。

您的網頁的高度將爲瀏覽器屏幕的100％，或100％的內容高度，以較大者爲準。

來源

2013-06-22 19:01:45

是的，但如果內容實際上超過100％的高度？ –

它仍然有效。 –

身體默認爲100％w/h。我沒有理由在CSS中有這個。 –

當height坐落在一個百分比的任何元素，它最直接的父元素必須指定（而不是作爲一個比例，但在px或em）height。

怪異的例外，該規則是<html>元素，如果它被賦予height: 100%，一個直接子元素就可以有height爲百分比（即<body>元素）。

至於設置min-height: 100%，這將初始大小設置爲100％的高度，並允許元素超過該高度。

我敢肯定，min-height也遵循同樣的上述規則height - 與min-height的百分比來設置任何元素，其直接父元素必須有height指定的（不是以百分比表示），與以height爲百分比設置的<html>元素的例外情況。

但是，如果一個元素設置height爲px或em價值，其直接子元素設置height爲百分比，孫子元素的height可以設置爲一個百分比，等等...

來源

2013-06-22 19:22:50

最小高度屬性不起作用

回答

相關問題