最小高度100％不能在內部div上工作

我有一個叫做「內容」的div，我希望至少佔據整個窗口的高度。最小高度100％不能在內部div上工作

因此，我所做的是：

body 
{ 
    min-height:100%; 
    height:auto !important; 

    /* The following probably aren't relevant but I'll include them just in case */ 
    min-width:600px; 
    color: #fff; 
    font-family:'lucida grande',verdana,helvetica,arial,sans-serif; 
    font-size:90%; 
    margin: 0; 
} 
div#content 
{ 
    min-height:100%; 

    /* The following probably aren't relevant but I'll include them just in case */ 
    clear: both; 
    color: #333; 
    padding: 10px 20px 40px 20px; 
    position:relative; 
    background:url(/img/strawberry.png) right bottom no-repeat; 
}

用Firebug，我覈實，確實現在佔用了整個頁面（甚至當有頁面上沒有內容就在我想要的。）

然而，問題是，內容並沒有佔據整個高度，而只是內容的大小。

編輯：似乎工作在鉻7.0.517.41，但不是在Firefox 3.6.10（問題似乎發生在所有版本的Firefox 3.6.x和可能以前的版本以及）。

來源

2010-10-22 Razor Storm

我已經解決了類似的問題，

html,body { 
    padding:0; 
    margin:0; 
    height:100%; 
    min-height:100%; 
}

看來<html>有時考慮到計算的高度。

來源

2010-10-22 07:26:04 MatTheCat

試過了，對ff 3.6.10沒有任何影響。 = [ – 2010-10-22 07:30:06

其實nvm它的工作，它是高度：auto！important;那是在殺死它。我想知道爲什麼它不影響鉻。 – 2010-10-22 07:35:11

我知道的唯一的事情是高度計算是非常危險的，這取決於瀏覽器... =/ – MatTheCat 2010-10-22 07:40:14

你可以嘗試設置明確的高度，以及一個最小高度：

min-height:100%; 
height:100%;

不知道是否它會工作，但裏面的東西說，這可能會。

來源

2010-10-22 07:22:06 Kyle

問題的，雖然是如果頁面的內容沒有得到大於一個窗口，然後在div不會規模。 = [ – 2010-10-22 07:22:45

使用高度代替身體上的最小高度。如果div變大，它應該溢出並正確顯示（在firefox，chrome中工作，即對我來說）。 – kapa 2010-10-22 07:26:01

真棒它解決了它。我不確定哪一個標記爲正確的答案，因爲你們都爲最終解決方案貢獻了一部分：（使用html和body，並且還使用height和min-height）。投票了 – 2010-10-22 07:35:55

body, html { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    min-height: 100%; 
} 
div#content 
{ 
    min-height: 100%; 
    height: 100%; 
}

這工作肯定...

來源

2010-10-22 07:36:41

只有在我的情況下工作的東西，謝謝。 – 2015-08-16 13:08:58

你不需要對身體最小高度使用。大多數情況下，你不需要在子塊上使用它。

這個小文章解釋了這一切： http://tympanus.net/codrops/2013/07/17/troubleshooting-css/#article-width-height

來源

2013-09-30 13:54:39 SAiNT