Make div height occupy parent remaining height

Question

http   jsfiddle net S8g4E   I have a container div with two children  The first child has a given height  How can I make the second child to occupy the  free space  of the container div without giving a specific height   In the example  the pink div should occupy also the white space     Similar to this question  How to make div occupy remaining height   But I don t want to give position absolute

User · Answer

My answer uses only CSS  and it does not use overflow hidden or display table-row  It requires that the first child really does have a given height  but in your question you state that only the second child need have its height not specified  so I believe you should find this acceptable   html   lt div id  container  gt       lt div id  up  gt Text lt br   gt Text lt br   gt Text lt br   gt  lt  div gt       lt div id  down  gt Text lt br   gt Text lt br   gt Text lt br   gt  lt  div gt   lt  div gt    css   container   width  300px  height  300px  border 1px solid red    up   background  green  height  63px  float left  width  100     down   background pink  padding-top  63px  height  100   box-sizing  border-box      http   jsfiddle net S8g4E 288

User · Answer

You can use floats for pushing content down   http   jsfiddle net S8g4E 5   You have a fixed size container    container       width  300px  height  300px      Content is allowed to flow next to a float  Unless we set the float to full width    up       float  left      width  100       While  up and  down share the top position   down s content can only start after the bottom of the floated  up     down       height 100

User · Answer

Abstract I didn t find a fully satisfying answer so I had to find it out myself  My requirements   the element should take exactly the remaining space either when its content size is smaller or bigger than the remaining space size  in the second case scrollbar should be shown   the solution should work when the parent height is computed  and not specified  calc   should not be used as the remaining element shouldn t know anything about another element sizes  modern and familar layout technique such as flexboxes should be used    The solution  Turn into flexboxes all direct parents with computed height  if any  and the next parent whose height is specified  Specify flex-grow  1 to all direct parents with computed height  if any  and the element so they will take up all remaining space when the element content size is smaller  Specify flex-shrink  0 to all flex items with fixed height so they won t become smaller when the element content size is bigger than the remaining space size  Specify overflow  hidden to all direct parents with computed height  if any  to disable scrolling and forbid displaying overflow content  Specify overflow  auto to the element to enable scrolling inside it    JSFiddle  element has direct parents with computed height  JSFiddle  simple case  no direct parents with computed height

User · Answer

check the demo - http   jsfiddle net S8g4E 6   use css -    container   width  300px  height  300px  border 1px solid red  display  table    up   background  green  display  table-row     down   background pink  display  table-row

User · Answer

Its been almost two years since I asked this question  I just came up with css calc   that resolves this issue I had and thought it would be nice to add it in case someone has the same problem   By the way I ended up using position absolute     http   jsfiddle net S8g4E 955   Here is the css   up   height 80px    down       height  calc 100  - 80px    The upper div needs to have a fixed height  80px in this case      And more information about it here  http   css-tricks com a-couple-of-use-cases-for-calc   Browser support  http   caniuse com  feat calc

User · Answer

Expanding the  down child to fill the remaining space of  container can be accomplished in various ways depending on the browser support you wish to achieve and whether or not  up has a defined height   Samples   x000D   x000D   container   x000D    width  100px  x000D    height  300px  x000D    border  1px solid red  x000D    float  left  x000D    x000D   up   x000D    background  green  x000D    x000D   down   x000D    background  pink  x000D    x000D   grid container   x000D    display  grid  x000D    grid-template-rows  100px  x000D    x000D   flexbox container   x000D    display  flex  x000D    flex-direction  column  x000D    x000D   flexbox container  down   x000D    flex-grow  1  x000D    x000D   calc  up   x000D    height  100px  x000D    x000D   calc  down   x000D    height  calc 100  - 100px   x000D    x000D   overflow container   x000D    overflow  hidden  x000D    x000D   overflow  down   x000D    height  100   x000D    x000D   lt div class  grid container  gt  x000D     lt div class  up  gt grid x000D       lt br   gt grid x000D       lt br   gt grid x000D       lt br   gt  x000D     lt  div gt  x000D     lt div class  down  gt grid x000D       lt br   gt grid x000D       lt br   gt grid x000D       lt br   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  flexbox container  gt  x000D     lt div class  up  gt flexbox x000D       lt br   gt flexbox x000D       lt br   gt flexbox x000D       lt br   gt  x000D     lt  div gt  x000D     lt div class  down  gt flexbox x000D       lt br   gt flexbox x000D       lt br   gt flexbox x000D       lt br   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  calc container  gt  x000D     lt div class  up  gt calc x000D       lt br   gt calc x000D       lt br   gt calc x000D       lt br   gt  x000D     lt  div gt  x000D     lt div class  down  gt calc x000D       lt br   gt calc x000D       lt br   gt calc x000D       lt br   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  overflow container  gt  x000D     lt div class  up  gt overflow x000D       lt br   gt overflow x000D       lt br   gt overflow x000D       lt br   gt  x000D     lt  div gt  x000D     lt div class  down  gt overflow x000D       lt br   gt overflow x000D       lt br   gt overflow x000D       lt br   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Grid  CSS s grid layout offers yet another option  though it may not be as straightforward as the Flexbox model  However  it only requires styling the container element    container   display  grid  grid-template-rows  100px     The grid-template-rows defines the first row as a fixed 100px height  and the remain rows will automatically stretch to fill the remaining space   I m pretty sure IE11 requires -ms- prefixes  so make sure to validate the functionality in the browsers you wish to support   Flexbox  CSS3 s Flexible Box Layout Module  flexbox  is now well-supported and can be very easy to implement  Because it is flexible  it even works when  up does not have a defined height    container   display  flex  flex-direction  column     down   flex-grow  1      It s important to note that IE10  amp  IE11 support for some flexbox properties can be buggy  and IE9 or below has no support at all   Calculated Height  Another easy solution is to use the CSS3 calc functional unit  as Alvaro points out in his answer  but it requires the height of the first child to be a known value    up   height  100px     down   height  calc  100  - 100px        It is pretty widely supported  with the only notable exceptions being  lt   IE8 or Safari 5  no support  and IE9  partial support   Some other issues include using calc in conjunction with transform or box-shadow  so be sure to test in multiple browsers if that is of concern to you   Other Alternatives  If older support is needed  you could add height 100   to  down will make the pink div full height  with one caveat   It will cause overflow for the container  because  up is pushing it down   Therefore  you could add overflow  hidden  to the container to fix that   Alternatively  if the height of  up is fixed  you could position it absolutely within the container  and add a padding-top to  down   And  yet another option would be to use a table display    container   width  300px  height  300px  border  1px solid red  display  table    up   background  green  display  table-row  height  0     down   background  pink  display  table-row

User · Answer

I m not sure it can be done purely with CSS  unless you re comfortable in sort of faking it with illusions  Maybe use Josh Mein s answer  and set  container to overflow hidden   For what it s worth  here s a jQuery solution   var contH       container   height    upH       up   height        down   css  height    contH - upH

User · Answer

Unless I am misunderstanding  you can just add height  100   and overflow hidden  to  down    down        background pink       height 100        overflow hidden       Live DEMO  Edit  Since you do not want to use overflow hidden   you can use display  table  for this scenario  however  it is not supported prior to IE 8   display  table  support    container        width  300px       height  300px       border 1px solid red      display table      up        background  green      display table-row      height 0       down        background pink      display table-row       Live DEMO  Note  You have said that you want the  down height to be  container height minus  up height  The display table  solution does exactly that and this jsfiddle will portray that pretty clearly

[html] Make div (height) occupy parent remaining height

Examples related to html

Examples related to css

Examples related to height

Examples related to parent