Force div to 100% of parent div height without spe

Question

I have a site with the following structure:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

The navigation is on the left and the content div is on the right. The information for the content div is pulled in through PHP, so it's different every time.

How to scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?

Answer 1

This trick does work: Adding a final element in your section of HTML with a style of clear:both;

    <div style="clear:both;"></div>

Everything before that will be included in the height.

Answer 2

#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}

Answer 3

#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

Look at this example.

Answer 4

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

From:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

states bootstrap but you do not need bootstrap to use this. Answering this old question, as this worked for me, and seems pretty easy to implement.

This was the same answer I provided to this Question

Answer 5

Try making the bottom margin 100%.

margin-bottom: 100%;

Answer 6

using jQuery:

$(function() {
    function unifyHeights() {
        var maxHeight = 0;
        $('#container').children('#navigation, #content').each(function() {
            var height = $(this).outerHeight();
            // alert(height);
            if ( height > maxHeight ) {
                maxHeight = height;
            }
        });
        $('#navigation, #content').css('height', maxHeight);
    }
    unifyHeights();
});