css height 100% of remaining content <p>I know this question has been asked so many times, but I can not find a way to make it work in my particular case.</p> <p>I have a container div in which there are 2 divs: the first one does not have a particular height and the second should fill the remaining height of the viewport.</p> <p>My container div css:</p> <pre class="lang-css prettyprint-override"><code>.overlay_on { display: block !important; position:fixed; top:40px; left:0; width:100%; height:100%; min-height: 100%; z-index:1000; background-color: white; } </code></pre> <p>The code:</p> <pre><code>&lt;div class="overlay_on"&gt; &lt;div style="max-width: 980px; margin: 0 auto; padding: 0;"&gt;some content that can expand&lt;/div&gt; &lt;div style="min-height:100%;height:100%; width: 100%;"&gt;other content that should fill the remaining height and not more&lt;/div&gt; &lt;/div&gt; </code></pre> <p>The issue is that the second div is taking the height of the parent and not the remaining height.</p> <p>How can I fix this?</p> <h3>Update:</h3> <p>I created a fiddle to show the problem: <a href="http://jsfiddle.net/3MgBx/" rel="nofollow">http://jsfiddle.net/3MgBx/</a><br> What I want is that the second div (in green) fill the remaining height and not more (I putted a beautiful image in it at height 100% to show that the div is continuing below the window)</p>