內部的div 100％的高度不能在div中使用min-height

我有div（#child），它不會擴展到它的父級的全部高度（#parent）。我已經爲html和body設置了高度。它可以工作，如果我將父母的身高設置爲100％，但我希望父母具有最小身高，並且孩子可以擴展到父母的身高。內部的div 100％的高度不能在div中使用min-height

HTML：

<html> 
    <body> 
     <div id="parent"> 
      <div id="child"> 
       <p>This area should be have the same height as it's parent.</p> 
      </div> 
     </div> 
    </body> 
</html>

CSS：

html, body, header, h1, p { margin: 0; padding: 0; } 

html   { background-color: #DDD; height: 100%; } 
body   { background-color: #DAA; height: 100%; } 

#parent { 
    min-height: 70%; 
    height: auto !important; 
    height: 70%; 

    background-color: #AAD; 
} 

#child { 
    height: 100%; /* why isn't this working ? */ 

    width: 80%; 
    margin: auto;  
    background-color: #ADA; 
}

的jsfiddle：http://jsfiddle.net/nxVNX/11/

來源

2012-06-24 Mihai Rotaru

height: auto !important;

永遠不要使用!important，因爲它不能被覆蓋，它的工作是有害的：。它沒有工作，因爲它總是使用height: auto;不height: 70%;

具有！重要的屬性的規則將永遠沒有應用身在何處，該規則出現在CSS文件內。

所以我建議你刪除這條線，它會起作用。
尋找更多關於What does !important mean in CSS?的信息。

來源

2012-06-24 18:05:54 Sajmon

我拿起這裏的最小高度片段：http://css-tricks.com/snippets/css/cross-browser-min-height/並假定它是最佳做法。甚至沒有試圖擺弄這一點。從現在開始，我會變得更加不可思議:)） –

當您刪除!important;屬性它的工作原理。也許這就是問題所在？我嘗試了其他幾種方法，但它們都不起作用，所以我想上面的解決方案可能是唯一的解決方案。

來源

2012-06-24 17:58:12

我不知道爲什麼，這是行不通的，但是這將工作

#parent { 
    min-height: 70%; 
    height: 100% !important; 
    height: 100%; 
    background-color: #AAD; 
}

來源

2012-06-24 18:00:37 sree

內部的div 100％的高度不能在div中使用min-height

回答

相關問題