當兩者都是百分比時，嵌套最小高度不工作

似乎一旦容器div以min-height屬性設置爲百分比，高度和最小高度不再適用於內部div的使用百分比。當兩者都是百分比時，嵌套最小高度不工作

的代碼如下...（一切按預期工作）：

  html,body{ 
 
     height:100%; 
 
     background:black; 
 
     } 
 
     .container{ 
 
     height: 30%; 
 
     background-color: green; 
 
     } 
 
     p{ 
 
     min-height:90%; 
 
     background-color:purple; 
 

 
     }

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     
 
     </head> 
 
    <body> 
 
    <div class="container"> 
 
     <p>The minimum height of this paragraph is set with percentage</p> 
 
    </div> 
 

 
    </body> 
 
    </html>

當我的div容器設置爲最小高度百分比，紫色款逐漸縮小。我期待該段保留包含div的90％。唯一不同於這個非工作版本的是我爲container div設置「height」爲「min-height」。

  html,body{ 
 
     height:100%; 
 
     background:black; 
 
     } 
 
     .container{ 
 
     min-height: 30%; /* LINE CHANGED */ 
 
     background-color: green; 
 
     } 
 
     p{ 
 
     min-height:90%; 
 
     background-color:purple; 
 

 
     }

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
     
 
     </head> 
 
    <body> 
 
    <div class="container"> 
 
     <p>The minimum height of this paragraph is set with percentage</p> 
 
    </div> 
 

 
    </body> 
 
    </html>

任何幫助或深入瞭解正在發生的事情，將不勝感激。我真的希望能夠做到這一點：這是一個更復雜的設計的一部分..我只是將它降低到基本的問題...

來源

2016-12-03 dars

...這是預期的行爲，雖然結果不是你所期望的不幸的結果。 – scooterlord

目前，我們有同樣的問題，其中許多人面臨，我們有開放的bug也

https://bugs.webkit.org/show_bug.cgi?id=26559

body,html tag height 100% = 662 
container div height is 30% of 100 = 0.3 * 662 = 198 
p tag is taking 30% * 30% of container class which is 0.3 * 0.3 * 198 =18.

我的建議是把

position: relative to .container class 
position: absolute to p tag

我希望如此，這是非常有用的

來源

2016-12-04 00:06:30 Ajaykumar

有趣的p標籤計算。「30％* 30％」來自哪裏？ – dars

當兩者都是百分比時，嵌套最小高度不工作

回答

相關問題