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.