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.

Answer 1

Try adding this to your stylesheet:

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