当两者都是百分比时，嵌套最小高度不工作

似乎一旦容器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

当两者都是百分比时，嵌套最小高度不工作

回答

相关问题