当两者都是百分比时嵌套的最小高度不工作 [英] Nested Min-Height Not Working When Both are Percentages
问题描述
代码如下...（一切按预期工作）：
html，body {height：100％;背景：黑色; } .container {height：30％;背景颜色：绿色; } p {最小高度：90％;背景色：紫色; }
<！DOCTYPE html> < HTML> < HEAD> < /头> <身体GT; < div class =container> < p>此段落的最低高度设定为百分比< / p> < / DIV> < /体> < / html>
当我将容器div设置为最小高度百分比，紫色段落缩小。我期待该段保留包含div的90％。唯一不同于这个非工作版本的是我为container div设置height为min-height。
html，body {height：100％;背景：黑色; } .container {最小高度：30％; / * LINE CHANGED * / background-color：green; } p {最小高度：90％;背景色：紫色; }
<！DOCTYPE html> < HTML> < HEAD> < /头> <身体GT; < div class =container> < p>此段落的最低高度设定为百分比< / p> < / DIV> < /体> < / html>
将不胜感激。我真的希望能够做到这一点：这是一个更复杂的设计的一部分..我只是浇水到基本的问题...
目前我们遇到了许多相同的问题，并且我们也有开放性的bug。
https://bugs.webkit.org/show_bug.cgi?id=26559 body，html标记高度100％= 662
容器div高度为100的30％= 0.3 * 662 = 198
p tag取30 ％* 30％的容器类别是0.3 * 0.3 * 198 = 18。
我的建议是将
position：相对于.container类
position：绝对值到p tag
我希望所以这是有用的
It seems that once a container div is set with the min-height property as a percentage, height and min-height no longer work with inner div's using percentages.
The code is below...(everything working as expected):
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>
When I set the container div to a min-height percentage, the purple paragraph shrinks down. I was expecting the paragraph to stay 90% of the containing div. The only thing different with this non-working version is I set "height" to "min-height" for the container div.
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>
Any help or insight into what is going on would be greatly appreciated. I really want to be able to do this: this is part of a more complex design..I just watered it down to basics for the question...
Currently we have the same issue faced by many of them and we have open bug also
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.
My suggestion is to put
position: relative to .container class
position: absolute to p tag
I hope so this is useful
这篇关于当两者都是百分比时嵌套的最小高度不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
