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    lt div id  header  gt  lt  div gt    lt div id  main  gt     lt div id  navigation  gt  lt  div gt     lt div id  content  gt  lt  div gt   lt  div gt    lt div id  footer  gt  lt  div gt    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

User · Answer

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.

User · Answer

height    lt percent gt  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

User · Answer

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

User · Answer

giving position  absolute  to the child worked in my case

User · Answer

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    lt main div gt       lt content div gt            lt navigation div gt  lt  div gt       lt  div gt   lt  div gt    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

User · Answer

main      display  table      navigation   content      display  table-cell      Look at this example

User · Answer

This answer is not ideal any more since CSS flexbox and grid where implemented to CSS  However it is still a working solution  On a smaller screen you would probably want to keep the height auto as the col1  col2 and col3 are stacked on one another   However after a media query breakpoint you would like cols to appear next to each other with an equal height for all columns    1125 px is only an example of window width breakpoint after which you would want to make all columns set to the same height    lt div class  wraper  gt       lt div class  col1  gt Lorem ipsum dolor sit amet  lt  div gt       lt div class  col2  gt 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  lt  div gt       lt div class  col3  gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Dolorem  odio qui praesentium  lt  div gt   lt  div gt    You could  of course  set more breakpoints if you need to     lt script gt        document  ready function              window  on  load resize   function                 let vraperH       wraper   height                if  window innerWidth gt   1125                      col1   height vraperH                     col2   height vraperH                     col3   height vraperH                             if  window innerWidth  lt  1125                      col1   height  auto                      col2   height  auto                      col3   height  auto                                       lt  script gt

User · Answer

For the parent   display  flex    You should add some prefixes  http   css-tricks com using-flexbox    Edit  As  Adam Garner noted  align-items  stretch  is not needed  Its usage is also for parent  not children  If you want to define children stretching  you use align-self    x000D   x000D   parent   x000D    background  red  x000D    padding  10px  x000D    display flex  x000D    x000D   x000D   other-child   x000D    width  100px  x000D    background  yellow  x000D    height  150px  x000D    padding   5rem  x000D    x000D   x000D   child     x000D    width  100px  x000D    background  blue  x000D    x000D   lt div class  parent  gt  x000D     lt div class  other-child  gt  x000D      Only used for stretching the parent x000D     lt  div gt  x000D     lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Add display  grid to the parent

User · Answer

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

User · Answer

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

User · Answer

You use CSS Flexbox   x000D   x000D   flex-container   x000D    display  flex  x000D    background-color  DodgerBlue  x000D    x000D   x000D   flex-container  gt  div   x000D    background-color   f1f1f1  x000D    margin  10px  x000D    padding  20px  x000D    font-size  30px  x000D    x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   lt head gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  flex-container  gt  x000D     lt div gt 1 lt  div gt  x000D     lt div gt 2 lt  div gt  x000D     lt div gt 3 lt  div gt    x000D   lt  div gt  x000D   x000D   lt p gt A Flexible Layout must have a parent element with the  lt em gt display lt  em gt  property set to  lt em gt flex lt  em gt   lt  p gt  x000D   x000D   lt p gt Direct child elements s  of the flexible container automatically becomes flexible items  lt  p gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Based on the method described in this article I have created  Less dynamic solution   Html      lt div id  container3  gt       lt div id  container2  gt           lt div id  container1  gt               lt div id  col1  gt Column 1 lt  div gt               lt div id  col2  gt Column 2 lt  div gt               lt div id  col3  gt Column 3 lt  div gt           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

main       overflow  hidden     navigation   content       margin-bottom  -1000px      padding-bottom  1000px

User · Answer

My solution     window  resize function            div to occupy the rest   height            window  height   -     div to occupy the rest   offset   top

User · Answer

This trick does work  Adding a final element in your section of HTML   with a style of clear both        lt div style  clear both   gt  lt  div gt        Everything before that will be included in the height

User · Answer

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

User · Answer

I had the same issue  it worked based on Hakam Fostok s answer  I ve created a small example  in some cases it might work without having to add display  flex  and flex-direction  column  on the parent container    row       margin-top  20px      col       box-sizing  border-box      border  solid 1px  6c757d      padding  10px      card       background-color   a0a0a0      height  100       JSFiddle

User · Answer

Try making the bottom margin 100    margin-bottom  100

User · Answer

using jQuery     function         function unifyHeights             var maxHeight   0              container   children   navigation   content   each function                 var height     this  outerHeight                   alert height               if   height  gt  maxHeight                     maxHeight   height                                        navigation   content   css  height   maxHeight             unifyHeights

User · 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

User · Answer

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

User · Answer

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   lt div class  container clearfix  gt       lt div class  sidebar  gt          simple text here      lt  div gt       lt div class  main  gt          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       lt  div gt   lt  div gt    Simple example  Note that you can turn into responsiveness

User · Answer

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

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

Examples related to html

Examples related to css