Safari: VH units applied to parent do not allow 100% height in child?

Question

I have a very simple situation where I want to set the container element to 80vh and then the inner div will be 100% of that height. In Chrome, this will display correctly, however in Safari, the inner element does not have 100% 80vh height.

 .container { background-color: red; width: 100%; height: 80vh; } .inner { height: 100%; background-color: blue; } 

Here is a fiddle showing this problem: http://jsfiddle.net/neilff/24hZQ/

In Chrome, the element is blue; in Safari, it is red. Is there any work for this problem without applying 80vh to the height of the .inner div?

Answer 1

This is a known bug with vh and vw in Safari. You can fix this by setting height: inherit to the inner element:

 .inner { height: inherit; } 

http://jsfiddle.net/24hZQ/47/

Answer 2

You can achieve this using flexbox (tested in Safari 7.0.6, iOS 7 and iOS 8.0) -

http://jsfiddle.net/clintioo/zkmnomab/

 .container { background-color: red; width: 100%; height: 80vh; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .inner { -ms-flex: 1; -webkit-flex: 1; -webkit-box-flex: 1.0; flex: 1; background-color: blue; } 

Answer 3

You need to set position: absolute; into the .inner element.

 .container { background-color: red; width: 100%; height: 80vh; position: relative; } .inner { height: 100%; background-color: blue; position: absolute; width: 100%; }