Wrapping 2 vertically stacked divs, 1 div 100% high

Question

I've been strolling around the internet for a while but I can't seem the find a fix for my problem. Perhaps you could help me out.

The issue

I am trying to wrap a div around 2 vertically stacked divs. At this moment I have a top div, which is viewport filling (100% height, 100% width) and a bottom div, which is of variable height but with a 100% width. The top div serves as a container for horizontally and vertically aligned content.

As soon as I apply a wrapper to the two divs, the top one collapses. It stops filling the entire viewport height.

The example

The current HTML looks like this:

<div id="top">
    <div id="top_content">Top content</div>
</div>
<div id="bottom">Bottom content</div>

With of course a JSFiddle: http://jsfiddle.net/4u4nqrcv/

The HTML I need looks like this:

<div id="wrapper">
    <div id="top">
        <div id="top_content">Top content</div>
    </div>
    <div id="bottom">Bottom content</div>
</div>

Also with a JSFiddle: http://jsfiddle.net/ggsztx78/

You can clearly see top div collapsed

The question

How can I wrap the 2 vertically stacked divs, maintaining the viewport filling height of the top div? I just need to find out exactly what CSS I should apply to the wrapper and possibly the 2 wrapped divs

Answer 1

You can use the viewport unit vh. 100vh = 100% of the viewport height.

http://jsfiddle.net/ggsztx78/3/

#top {
    width: 100%;
    height: 100vh;
    background-color: #f4f;
    display: table;
}

Support isn't that bad if you are not using vmin or vmax.

Answer 2

Working JSfiddle It's easy, you did not set any css parameter to the wrapper, and it needed to also have height and width of 100%, margin and padding set to 0.

#wrapper{
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
}

Answer 3

You need to also give the wrapper a height: 100%.

By setting height: 100% you tell an element to become 100% of the height of its parent. Therefore you need to give all ancestors of the #top-content an height of 100% to make the #top-content take up 100% of the screens height.