make div s height expand with its content

Question

I have these nested divs and I need the main container to expand  in height  to accommodate the DIVs inside       lt  -- head -- gt               lt  --  head -- gt        lt body  class  main  gt         lt div  id  container  gt           lt div  id  header  gt             lt  --series of divs in here  graphic banner etc  -- gt           lt  div gt        lt div  id  main content  gt   lt  -- this DIV  should  stretch to accommodate inner divs -- gt         lt div  id  items list   class  items list ui-sortable  gt           lt div id  item 35  class  item details  gt           lt  div gt           lt div id  item 36  class  item details  gt           lt  div gt                   lt div id  item 37  class  item details  gt           lt  div gt           lt  -- this list of DIVs  item xx  goes on for a while              each one representing a photo with name  caption etcetc -- gt         lt  div gt       lt  div gt       lt br class  clear   gt        lt div id  footer  gt       lt  div gt     lt  body gt   lt  html gt    CSS is this           padding  0      margin  0      main       font  100  Verdana  Arial  Helvetica  sans-serif      background   4c5462      margin  0       padding  0      text-align  center       color   000000     main  container       height  auto      width  46em      background   4c5462      margin  0 auto       border  0px solid  000000      text-align  left             main  main content       padding  5px      margin  0px     items list       width  400px      float  left      items list       width  400px      float  left     item details       margin-top  3px      margin-bottom  3px      padding  3px      float  left      border-bottom  0 5px solid blue      The problem I have is that  main content doesn t stretch to accommodate all the inner divs  with the result that they keep going against the background   How can I solve this problem considering the above scenario

User · Answer

You can use CSS Grid Layout  Support is rather wide at the moment  check it on caniuse   Here is the example on jsfiddle  Also example with tons of text stuff   HTML code    lt div class  container  gt     lt div class  header  gt     Header    lt  div gt     lt div class  content  gt     Content    lt  div gt     lt div class  footer  gt     Footer    lt  div gt   lt  div gt    CSS Code    html  body     width  100     height  100     margin  0      container     width  100     height  100      display  grid    grid-template-rows  100px auto 150px    grid-template-columns  auto       style stuff

User · Answer

I know this is kind of old thread  however  this can be achieved with min-height CSS property in a clean way  so I ll leave this here for future references   I made a fiddle based on the OP posted code here  http   jsfiddle net U5x4T 1   as you remove and add divs inside  you ll notice how does the container expands or reduces in size  The only 2 things you need to achieve this  additional to the OP code is    Overflow in the main container  required for the floating divs    min-height css property  more info available here  http   www w3schools com cssref pr dim min-height asp

User · Answer

add the following   overflow hidden  height 1     to your main div  Eliminates the need for the extra  lt br   gt  for the clear

User · Answer

Before to do anything check for css rules with     position absolute     Remove if exist and don t need them

User · Answer

I tried this and it worked   lt div style   position  absolute  direction  ltr height auto  min-height 100   gt     lt  div gt

User · Answer

Use the span tag with display inline-block css attached to it  You can then use CSS and manipulate it like a div in lots of ways but if you don t include a width or height it expands and retracts based on its content   Hope that helps

User · Answer

This problem arises when the Child elements of a Parent Div are floated  Here is the Latest Solution of the problem   In your CSS file write the following class called  clearfix along with the pseudo selector  after    clearfix after       content          display  table      clear  both      Then  in your HTML  add the  clearfix class to your parent Div  For example    lt div class  clearfix  gt       lt div gt  lt  div gt       lt div gt  lt  div gt   lt  div gt    It should work always  You can call the class name as  group instead of  clearfix   as it will make the code more semantic  Note that  it is Not necessary to add the dot or even a space in the value of Content between the double quotation     Also  overflow  auto  might solve the problem but it causes other problems like showing the scroll-bar and is not recommended   Source  Blog of Lisa Catalano and Chris Coyier

User · Answer

Floated elements do not occupy the space inside of the parent element  As the name suggests they float  Thus if a height is explicitly not provided to an element having its child elements floated  then the parent element will appear to shrink  amp  appear to not accepting dimensions of the child element  also if its given overflow hidden  its children may not appear on screen  There are multiple ways to deal with this problem    Insert another element below the floated element with clear both  property  or use clear both  on  after of the floated element  Use display inline-block  or flex-box instead of float

User · Answer

I m running into this on a project myself - I had a table inside a div that was spilling out of the bottom of the div  None of the height fixes I tried worked  but I found a weird fix for it  and that is to put a paragraph at the bottom of the div with just a period in it  Then style the  color  of the text to be the same as the background of the container  Worked neat as you please and no javascript required  A non-breaking space will not work - nor does a transparent image    Apparently it just needed to see that there is some content below the table in order to stretch to contain it  I wonder if this will work for anyone else   This is the sort of thing that makes designers resort to table-based layouts - the amount of time I ve spent figuring this stuff out and making it cross-browser compatible is driving me crazy

User · Answer

Typically I think this can be resolved by forcing a clear both rule on the last child-element of the  items list   You can either use    items list last-child  clear  both     Or  if you re using a dynamic language  add an additional class to the last element generated in whatever loop creates the list itself  so you end up with something in your html like    lt div id  list item 20  class  last list item  gt    and css   last list item  clear  both

User · Answer

Added display inline to the div and it grew auto   not the scroll stuff   when height content got bigger then the set div height of 200px

User · Answer

Have you tried the traditional way  give the main container height auto   container height auto    I have used this and it worked most of the times with me

User · Answer

Thw following should work    main  main content       padding  5px      margin  0px      overflow  auto      width  100     for some explorer browsers to trigger hasLayout

User · Answer

Very simple way On parent DIV  height  100   This work for me every time

User · Answer

Looks like this works  html    width 100    height auto   min-height 100       It takes the screen size as minimum  and if the content expands it grows

User · Answer

add a float property to the  main content div - it will then expand to contain its floated contents

User · Answer

I tried pretty much every suggestion listed above and none of them worked  However   display  table  did the trick for me

User · Answer

You need to force a clear both before the  main content div is closed  I would probably move the  lt br class  clear    gt   into the  main content div and set the CSS to be    clear   clear  both      Update  This question still gets a fair amount of traffic  so I wanted to update the answer with a modern alternative using a new layout mode in CSS3 called Flexible boxes or Flexbox     x000D   x000D  body   x000D    margin  0  x000D    x000D   x000D   flex-container   x000D    display  flex  x000D    flex-direction  column  x000D    min-height  100vh  x000D    x000D   x000D  header   x000D    background-color   3F51B5  x000D    color   fff  x000D    x000D   x000D  section content   x000D    flex  1  x000D    x000D   x000D  footer   x000D    background-color   FFC107  x000D    color   333  x000D    x000D   lt div class  flex-container  gt  x000D     lt header gt  x000D       lt h1 gt  x000D       Header    x000D       lt  h1 gt  x000D     lt  header gt  x000D   x000D     lt section class  content  gt  x000D      Content x000D     lt  section gt  x000D   x000D     lt footer gt  x000D       lt h4 gt  x000D        Footer x000D       lt  h4 gt  x000D     lt  footer gt  x000D   lt  div gt  x000D   x000D   x000D    Most modern browsers currently support Flexbox and viewport units  but if you have to maintain support for older browsers  make sure to check compatibility for the specific browser version

User · Answer

In CSS   clear div clear both    After the div tag of the inner div add this new following div    lt div id  clear div  gt  lt  div gt    http   www w3schools com cssref pr class clear asp    for more information

User · Answer

If you are using jQuery UI  they already have a class the works just a charm  add a  lt div gt  at the bottom inside the div that you want expand with height auto  then add a class name ui-helper-clearfix or use this style attribute and add just like below      lt div style   clear both  overflow hidden  height 1     gt  lt  div gt    add jQuery UI class to the clear div  not the div the you want to expand

User · Answer

No need to use a lot of CSS  just use bootstrap  then use   class  container    for the div that needs to be filled   You can get bootstrap from here

User · Answer

Try this  overflow  auto   It worked for my problem

User · Answer

I would just use  height  auto    in your div  Yes  I know I m a-little late but I figured this might help somebody like it would have helped me if it was here

User · Answer

as an alternative way you can also try this that may be usefull in some situations   display table    jsFiddle

User · Answer

I added Bootstrap to a project with section tags that I had set to 100  of screen height  It worked well until I made the project responsive  at which point I borrowed part of jennyfofenny s answer so my section background matched background of the content when the screen size changed on smaller screens   My new section CSS looks like this   section          min-height so it looks good on big screen        but resizes on a small-screen     min-height  100       min-height  100vh      width 100       width 100vh      Let s say you ve got a section that s a certain color  By using min-height  if the width of the section shrinks because of a smaller-screen  the height of the section will expand  the content will stay within the section  and your background will stay the desired color

[css] make div's height expand with its content

Examples related to css

Examples related to height