'Force child div to stretch so the parent div captures 100% of screen's height

I have the following html layout:

<div class="wrapper">
    <div class="row one">
        <div class="col one"><!-- some content here --></div>
        <div class="col two"><!-- some content here --></div>
    </div>
    <div class="row two"><!-- some content here --></div>
</div>

So I have two rows (content and footer) and the first row has two columns.

The footer's (row two) height is not set and is defined from it's content.

How can I force my content area (row one) to stretch so the entire wrapper div takes 100% of screen's height?

Some indicative (not working) css here:

.wrapper {
    display: inline-block;
    width: 100%;
    height: 100%;
}

.row.one {
    width: 100%;
    display: flex;
}

.row.two {
    width: 100%;
}

.row.one .col.one {}

.row.one .col.two {}
htmlcss


Solution 1:[1]

Setting the height of the wrapper to the height of the viewport, and then stretching the flexbox contents (column... not row) vertically has always worked well for me.

.wrapper {
    display: flex;
    flex-flow:  column nowrap;
    align-items: stretch;
    height: 100vh;
    width: 100vw; /* or whatever */
}

.row {
    flex: auto;
    width: 100%;
    ...
}

Solution 2:[2]

Try this:

.wrapper {
display: inline-block;
height: 100vh;
width: 100%;
}

.row.one {
display: flex;
height: 100%;
}

.row.two {
}

.row.one .col.one {}

.row.one .col.two {}

Solution 3:[3]

css viewheight will achieve what you want.

100vh applied to .row.one makes the div occupy the full visible height.

.row.one {
background: pink;
height: 100vh;
}
<div class="wrapper">
    <div class="row one">
        <div class="col one">some content here </div>
        <div class="col two">some other content here </div>
    </div>
    <div class="row two">footer content</div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matt Rose
Solution 2 Mohamed Ghulam
Solution 3 Dave Pritlove

Related Questions