Neil Neil - 5 months ago 20
CSS Question

Safari: VH units applied to parent element doesn't allow 100% height in child?

I have a very simple situation, where I want to set a container element to

80vh
and then have the inner div to be 100% of that height. On Chrome this will render correctly, however on Safari, the inner element doesn't have 100% of the
80vh
height.

.container {
background-color: red;
width: 100%;
height: 80vh;
}

.inner {
height: 100%;
background-color: blue;
}


Here is a fiddle showing this issue: http://jsfiddle.net/neilff/24hZQ/

On Chrome the element is blue, in Safari it is red. Is there a work around for this issue without applying
80vh
to the height of the
.inner
div?

Answer

This is a known bug with vh and vw in Safari. You can fix it by setting height: inherit on the inner element:

.inner {
    height: inherit;
}

http://jsfiddle.net/24hZQ/47/