Percentage height inside a viewport unit div won't work in Safari

Question

I have a 100% tall div based on the viewport using the vh unit:

div {
    height:100vh;
    background:red;
}

Inside this 100% tall div, i need a 50% tall div:

span {
    display:block;
    height:50%;
    background:blue;
}

Works fine in Chrome, not so good in Safari. Thought its should work, but only works when i'm using a fixed value for the parent div height. Its not working in mobile safari too with latest iOS 7.1

Demo: http://jsfiddle.net/qQ8dm/

Works with fixed height: http://jsfiddle.net/xbBcy/ & http://jsfiddle.net/xbBcy/1/

I know, i could use 50vh for the parent div, but a simply percentage height might be better for cross browser compatibility, easier to create a fallback, if i only use vh unit once.

What browser are you using? http://caniuse.com/viewport-units — Mathias, Mar 11 '14 at 09:41
Safari 7.0.1, so looks like its a browser bug, i'll updated the question... — passatgt, Mar 11 '14 at 09:47
having the same problem. is there any workaround in pure css? if not, javascript is to be used. — Lwin Htoo Ko, Sep 02 '14 at 09:04
@StephanMuller, I have safary version 9.1.2 - and the bug is exist... — user5260143, Nov 27 '16 at 09:34
to be more specific: I'm seeing this behavior when a parent container is using `min-height: 50vh` and the child is using `height: 100%`. — cspanring, Jan 31 '17 at 22:34

score 0 · Answer 1 · answered Sep 25 '14 at 17:46

0

Try adding this to your stylesheet:

html, body{
    height: 100%;
    width: 100%;
}

answered Sep 25 '14 at 17:46

Justin Medas

201
1
8

Percentage height inside a viewport unit div won't work in Safari

1 Answers1