Menu
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...
857
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
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
