How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

    |
  • Added:
  • |
  • In: Wordpress

I would assume this is possible, but I just cant figure it out..

I have a site thats basic structure is set up as follows.

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

The navigation is a left hand navigation with a content div to the right of it. I would like to scale the navigation vertically to be the same height as the content div depending on what is loaded into the content div. the information for the content div is pulled in through PHP, so it is different every time. anyway long story short. Is there a way to set it so that my navigation will always be the full height of the content div no matter which page is loaded?

This Question Has 19 Answeres | Orginal Question | user137726

height : <percent> will only work if you have all parent nodes with specified percent height with a fixed height in pixels, ems, etc. on top level. That way, the height will cascade down to your element.

You can specify 100% to html and body elements as @Travis stated earlier to have the page height cascading down to your nodes.

Based on the method described in this article I have created .Less dynamic solution:

Html:

<div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div> 

Less:

/* Changes these variables to adjust your columns */ @col1Width: 60%; @col2Width: 1%; @padding: 0%; /* Misc variable. Do not change */ @col3Width: 100% - @col1Width - @col2Width; #container3 { float: left; width: 100%; overflow: hidden; background-color: red; position: relative; #container2 { float: left; width: 100%; position: relative; background-color: yellow; right: @col3Width; #container1 { float: left; width: 100%; position: relative; right: @col2Width; background-color: green; #col1 { float: left; width: @col1Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding; overflow: hidden; } .col2 { float: left; width: @col2Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding + @padding * 2; overflow: hidden; } #col3 { float: left; width: @col3Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding + @padding * 4; overflow: hidden; } } } } 

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.

After long searching and try, nothing solved my problem except

style = "height:100%;" 

on the children div

and for parent apply this

.parent { display: flex; flex-direction: column; } 

also I am using bootstrap and this did not corrupt the responsive for me.

There is a bit of a contradiction in the question's title and the content. The title speaks of a parent div, but the question makes it sound like you want two sibling divs (navigation and content) to be the same height.

Do you (a) want both navigation and content to be 100% the height of main, or (b) want navigation and content to be be same height?

I'll assume (b)...if that is so, I don't think you will be able to do it given your current page structure (at least, not with pure CSS and no scripting). You would probably need to do something like:

<main div> <content div> <navigation div></div> </div> </div> 

and set the content div to have a left margin of whatever the width of the navigation pane is. That way, the content's content is to the right of the navigation and you can set the navigation div to be 100% of the content's height.

EDIT: I'm doing this completely in my head, but you would probably also need to set the navigation div's left margin to a negative value or set it's absolute left to 0 to shove it back to the far left. Problem is, there are many ways to pull this off but not all of them are going to be compatible with all browsers.

Try making the bottom margin 100%.

margin-bottom: 100%; 

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

For the parent:

display: flex; 

For children:

align-items: stretch; 

You should add some prefixes, http://css-tricks.com/using-flexbox/.

As shown earlier, flexbox is the easiest. eg.

#main{ display: flex; align-items:center;} 

this will align all child elements to the center within the parent element.

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.

My solution:

$(window).resize(function() { $('#div_to_occupy_the_rest').height( $(window).height() - $('#div_to_occupy_the_rest').offset().top ); }); 

[Referring to Dmity's Less code in another answer] I'm guessing that this is some kind of "pseudo-code"?

From what I understand try using the faux-columns technique that should do the trick.

http://www.alistapart.com/articles/fauxcolumns/

Hope this helps :)

In RWD project best would be to use jQuery. For small screen you would prabobly want to keep the height auto as the col1, col2 and col3 are stacked one on anoher.

However after a media query brak point you would like cols to apear next to each other with equal height for all columns.

1125 px is only an example of window width break point after which you would want to make all columns set to the same height.

<div class="wraper"> <div class="col1">Lorem ipsum dolor sit amet.</div> <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div> <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div> </div> 

You could ofcaurse set more break points if you need to.

<script> $(document).ready(function(){ $(window).on('load resize', function() { if (window.innerWidth>= 1125) { $('.col1').height($('.wraper').height()); $('.col2').height($('.wraper').height()); $('.col3').height($('.wraper').height()); } if (window.innerWidth < 1125) { $('.col1').height('auto'); $('.col2').height('auto'); $('.col3').height('auto'); } }); }); </script> 

I know it's been a looong time since the question was made, but I found an easy solution and thought someone could use it (sorry about the poor english). Here it goes:

CSS

.main, .sidebar { float: none; padding: 20px; vertical-align: top; } .container { display: table; } .main { width: 400px; background-color: LightSlateGrey; display: table-cell; } .sidebar { width: 200px; display: table-cell; background-color: Tomato; } 

HTML

<div class="container clearfix"> <div class="sidebar"> simple text here </div> <div class="main"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante. </div> </div> 

Simple example. Note that you can turn into responsiveness.

The easiest way to do this is to just fake it. A List Apart has covered this extensively over the years, like in this article from Dan Cederholm from 2004.

Here's how I usually do it:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;"> <div id="navigation" style="float:left;width:190px;padding-right:10px;"> <!-- Navigation --> </div> <div id="content" style="float:left;width:750px;"> <!-- Content --> </div> </div> 

You can easily add a header onto this design by wrapping #container in another div, embedding the header div as #container's sibling, and moving the margin and width styles to the parent container. Also, the CSS should be moved into a separate file and not kept inline, etc. etc. Finally, the clearfix class can be found on positioniseverything.

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.

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

Look at this example.

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

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(); }); 

Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top