Advertisement
Advertisement


How to force child div to be 100% of parent div's height without specifying parent's height?


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 can I scale the navigation vertically so that its height is the same as the content div's height, no matter which page is loaded?

2019/01/03
1
551
1/3/2019 8:20:39 PM

Accepted Answer

NOTE: This answer is applicable to legacy browsers without support for the Flexbox standard. For a modern approach, see: https://stackoverflow.com/a/23300532/1155721


I suggest you take a look at Equal Height Columns with Cross-Browser CSS and No Hacks.

Basically, doing this with CSS in a browser compatible way is not trivial (but trivial with tables) so find yourself an appropriate pre-packaged solution.

Also, the answer varies on whether you want 100% height or equal height. Usually it's equal height. If it's 100% height the answer is slightly different.

2017/07/17
176
7/17/2017 11:06:34 AM


This is a frustrating issue that's dealt with designers all the time. The trick is that you need to set the height to 100% on BODY and HTML in your CSS.

html,body {
    height:100%;
}

This seemingly pointless code is to define to the browser what 100% means. Frustrating, yes, but is the simplest way.

2009/07/13

I find that setting the two columns to display: table-cell; instead of float: left; works well.

2015/11/09

If you don't mind the navigation div being clipped in the event of an unexpectedly-short content div, there's at least one easy way:

#main {
position: relative;
}

#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}

#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}

Elsewise there's the faux-columns technique.


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

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();
});
2011/07/12

Source: https://stackoverflow.com/questions/1122381
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]