I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
max-height overrides height, but min-height always overrides max-height . Check out this Pen! The percentage is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.
In fact, height 100% corresponds to height of the screen minus the address bar at top of screen, while 100vh corresponds to height of the screen without the address bar.
Values. Defines the max-height as an absolute value. Defines the max-height as a percentage of the containing block's height.
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox
properties - container won't take 100% of the height.
Another solution (besides position: absolute;
) would be to use vh
(viewport height) units:
div {
height: 100vh;
}
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