The percentage height inside the div block of the viewport will not work in Safari

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

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

Inside this 100 percent div div, I need a 50% high div:

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

Works great in Chrome, not so good in Safari. Thought it should work, but only works when I use a fixed value for the parent div height. It does not work in mobile safari too with the latest iOS 7.1

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

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

, 50vh div, - , , vh.

+4
1

:

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

Source: https://habr.com/ru/post/1531132/


All Articles