Clever Geek Handbook

Height 100% not working when parent height is set with vh in android

I am facing this problem. With Chrome on Android, it works in a different browser on the same device:

The problem is that the nested DIV does not fill the parent (whose height is 100vh) when I set the height from 100%.

<style>
    #a{width:100%;height: 100vh;background-color: red;}
    #a .inner {width: 100%;height: 100%;min-height: 100%; background-color: green;}
</style>

<div id="a">
    <div class="inner">The GREEN must fill the screen</div>
</div>

I tested Chrome version: 26.0.1410.58 and 30.0.0.0.

: (

+3


source to share


2 answers


This seems to be a bug in Chrome. I tested Chrome version 44.0.2403.133 and it worked correctly.



But we need to find a solution to work on this

+1


source


Make your child div min-height 100vh to match your parent. Here's a fiddle with updated code: https://jsfiddle.net/6c55a8az/



#a{width:100%;height: 100vh;background-color: red;}
#a .inner {width: 100%;height: 100%;min-height: 100vh; background-color: green;}
0


source






More articles:


All Articles