Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Safari height 100% element inside a max-height element

Tags:

css

safari

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.

like image 497
Chad Avatar asked Oct 01 '13 15:10

Chad


People also ask

Does height override max-height?

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.

What does min-height 100% do?

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.

Can Max-height be a percentage?

Values. Defines the max-height as an absolute value. Defines the max-height as a percentage of the containing block's height.

How do I change my height to 100% in CSS?

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.


2 Answers

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

like image 37
insertusernamehere Avatar answered Sep 25 '22 09:09

insertusernamehere


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;
}
like image 186
Sergey Dubovik Avatar answered Sep 26 '22 09:09

Sergey Dubovik