How to get a div to resize its height to fit container

Question

How can I get the nav div to have expand down or have the height the same as its parent div    x000D   x000D        x000D      border 0   x000D      padding 0   x000D      margin 0  x000D    x000D   container   x000D      margin-left  auto  x000D      margin-right  auto  x000D      border  1px solid black  x000D      overflow  auto  x000D      width  800px     x000D    x000D   nav   x000D      width  19   x000D      border  1px solid green  x000D      float left   x000D    x000D   content   x000D      width  79   x000D      border  1px solid red  x000D      float right  x000D    x000D   lt div id  container  gt  x000D       lt div id  nav  gt  x000D           lt ul gt  x000D               lt li gt Menu lt  li gt  x000D               lt li gt Menu lt  li gt  x000D               lt li gt Menu lt  li gt  x000D               lt li gt Menu lt  li gt  x000D               lt li gt Menu lt  li gt  x000D           lt  ul gt  x000D       lt  div gt  x000D       lt div id  content  gt  x000D           lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Aliquam fermentum consequat ligula vitae posuere  Mauris dolor quam  consequat vel condimentum eget  aliquet sit amet sem  Nulla in lectus ac felis ultrices dignissim quis ac orci  Nam non tellus eget metus sollicitudin venenatis sit amet at dui  Quisque malesuada feugiat tellus  at semper eros mollis sed  In luctus tellus in magna condimentum sollicitudin  Class aptent taciti sociosqu ad litora torquent per conubia nostra  per inceptos himenaeos  Curabitur vel dui est  Aliquam vitae condimentum dui  Praesent vel mi at odio blandit pellentesque  Proin felis massa  vestibulum a hendrerit ut  imperdiet in nulla  Sed aliquam  dolor id congue porttitor  mauris turpis congue felis  vel luctus ligula libero in arcu  Pellentesque egestas blandit turpis ac aliquet  Sed sit amet orci non turpis feugiat euismod  In elementum tristique tortor ac semper  lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Untitled Document lt  title gt   lt style type  text css  gt   top   bottom       height  100px      width  100       position  relative     container       overflow  hidden      position  relative      width  100      container  left       height  550px      width  55       position  relative      float  left      background-color   3399FF     container  right       height  100       position  absolute      right  0      left  55       bottom  0px      top  0px      background-color   3366CC     lt  style gt   lt  head gt    lt body gt   lt div id  top  gt  lt  div gt   lt div id  container  gt     lt div class  left  gt  lt  div gt     lt div class  right  gt  lt  div gt   lt  div gt   lt div id  bottom  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Unfortunately  there is no fool-proof way of achieving this  A block will only expand to the height of its container if it is not floated  Floated blocks are considered outside of the document flow   One way to do the following without using JavaScript is via a technique called Faux-Columns   It basically involves applying a background-image to the parent elements of the floated elements which makes you believe that the two elements are the same height   More information available at      A List Apart  Articles  Faux Columns

User · Answer

I had the same issue  I resolved it using some javascript    lt script type  text javascript  gt   var theHeight       PrimaryContent   height     100       SecondaryContent   height theHeight    lt  script gt

User · Answer

Another one simple method is there  You don t need to code more in CSS  Just including a java script and entering the div  id  inside the script you can get equal height of columns so that you can have the height fit to container  It works in major browsers   Source Code    lt  DOCTYPE HTML PUBLIC  -  W3C  DTD HTML 4 01  EN   http   www w3 org TR html4 strict dtd  gt   lt html gt  lt head gt   lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt meta http-equiv  Content-Style-Type  content  text css    gt   lt meta http-equiv  Content-Script-Type  content  text javascript    gt   lt title gt  lt  title gt   lt style type  text css  gt       border 0  padding 0  margin 0     Set everything to  zero      container       margin-left  auto      margin-right  auto      border  1px solid black      overflow  auto      width  800px            nav       width  19       border  1px solid green      float left      content       width  79       border  1px solid red      float right     lt  style gt    lt script language  javascript  gt  var ddequalcolumns new Object     Input IDs  id attr  of columns to equalize  Script will check if each corresponding column actually exists  ddequalcolumns columnswatch   nav    content    ddequalcolumns setHeights function reset   var tallest 0 var resetit  typeof reset   string    true   false for  var i 0  i lt this columnswatch length  i     if  document getElementById this columnswatch i    null   if  resetit  document getElementById this columnswatch i   style height  auto  if  document getElementById this columnswatch i   offsetHeight gt tallest  tallest document getElementById this columnswatch i   offsetHeight     if  tallest gt 0   for  var i 0  i lt this columnswatch length  i     if  document getElementById this columnswatch i    null  document getElementById this columnswatch i   style height tallest  px         ddequalcolumns resetHeights function    this setHeights  reset      ddequalcolumns dotask function target  functionref  tasktype     assign a function to execute to an event handler  ie  onunload  var tasktype  window addEventListener   tasktype    on  tasktype if  target addEventListener  target addEventListener tasktype  functionref  false  else if  target attachEvent  target attachEvent tasktype  functionref     ddequalcolumns dotask window  function   ddequalcolumns setHeights      load   ddequalcolumns dotask window  function   if  typeof ddequalcolumns timer   undefined   clearTimeout ddequalcolumns timer   ddequalcolumns timer setTimeout  ddequalcolumns resetHeights     200     resize      lt  script gt    lt div id container gt       lt div id nav gt           lt ul gt                   lt li gt Menu lt  li gt                   lt li gt Menu lt  li gt                   lt li gt Menu lt  li gt                   lt li gt Menu lt  li gt                   lt li gt Menu lt  li gt           lt  ul gt       lt  div gt       lt div id content gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Aliquam fermentum consequat ligula vitae posuere  Mauris dolor quam  consequat vel condimentum eget  aliquet sit amet sem  Nulla in lectus ac felis ultrices dignissim quis ac orci  Nam non tellus eget metus sollicitudin venenatis sit amet at dui  Quisque malesuada feugiat tellus  at semper eros mollis sed  In luctus tellus in magna condimentum sollicitudin  Class aptent taciti sociosqu ad litora torquent per conubia nostra  per inceptos himenaeos  Curabitur vel dui est  Aliquam vitae condimentum dui  Praesent vel mi at odio blandit pellentesque  Proin felis massa  vestibulum a hendrerit ut  imperdiet in nulla  Sed aliquam  dolor id congue porttitor  mauris turpis congue felis  vel luctus ligula libero in arcu  Pellentesque egestas blandit turpis ac aliquet  Sed sit amet orci non turpis feugiat euismod  In elementum tristique tortor ac semper  lt  p gt       lt  div gt   lt  div gt    lt  body gt   lt  html gt    You can include any no of divs in this script    ddequalcolumns columnswatch   nav    content    modify in the above line its enough   Try this

User · Answer

you would possibbly need to specify the height of container and then set the nav s height to 100     Edit  had a quick look around and it seems that the height property applies to the parents height so you will indeed need to set the containers height   NB  setting the height of the body element to 100  only scales it to the height of the browser window  Any content which goeds over one page will not have the same background etc

User · Answer

Simple Way  You can achieve this with setting both the top and bottom attributes of the nav to 0 and the position  absolute  Set the container to position  relative   See how this is done  Modern Way  Flexbox   IE11  and all modern browsers support flexbox    container     display  flex    flex-direction  column      child     flex-grow  1

User · Answer

You probably are going to want to use the following declaration   height  100    This will set the div s height to 100  of its containers height  which will make it fill the parent div

User · Answer

If the trick using position absolute  position relative and top left bottom right  0px is not appropriate for your situation  you could try    nav       height  inherit      This worked on one of our pages  although I am not sure exactly what other conditions were needed for it to succeed

[html] How to get a div to resize its height to fit container?

Examples related to html

Examples related to css