Search code examples
csssafariviewport-unitssafari7

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?

Solution

  • 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/