Question

似乎一旦使用min-height属性设置容器div作为百分比，高度和最小高度不再使用百分比使用内部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％。这个非工作版本唯一不同的是我将容器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>

非常感谢任何有关正在发生的事情的帮助或见解。我真的希望能够做到这一点：这是一个更复杂的设计的一部分......我只是把它简化为问题的基础......

Answer 1

目前我们遇到了许多人面临同样的问题，我们也有开放的错误

latest development snapshot

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

我希望这很有用

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

1 个答案: