How to make div occupy remaining height

Question

I have this problem  I have two divs    lt div style  width 100   height 50px   id  div1  gt  lt  div gt   lt div style  width 100    id  div2  gt  lt  div gt    How do I make div2 occupy remaining height of the page

User · Answer

Why not use padding with negative margins? Something like this:

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>

And then

.parent {
  padding-top: 1em;
}
.child1 {
  margin-top: -1em;
  height: 1em;
}
.child2 {
  margin-top: 0;
  height: 100%;
}

User · Answer

I faced the same challenge myself and found these 2 answers using flex properties   CSS   container     display  flex    flex-direction  column      dynamic-element    flex  1       https   stackoverflow com a 35348188 1084619 https   stackoverflow com a 35348188 1084619

User · Answer

With CSS tables  you could wrap a div around the two you have there and use this css html structure    lt style type  text css  gt   container   display table  width 100   height 100       div1   display table-row  height 50px  background-color red     div2   display table-row  background-color blue     lt  style gt    lt div class  container  gt       lt div id  div1  gt  lt  div gt       lt div id  div2  gt  lt  div gt   lt  div gt    Depends on what browsers support these display types  however  I don t think IE8 and below do  EDIT  Scratch that-- IE8 does support CSS tables

User · Answer

I tried with CSS  and or you need to use display  table or you need to use new css that is not yet supported on most browsers  2016    So  I wrote a jquery plugin to do it for us  I am happy to share it    x000D   x000D    x000D    Credit Efy Teicher x000D    document  ready function      x000D                  fillHight   fillHeight    x000D                  fillWidth   fillWidth    x000D              x000D   x000D          window onresize   function  event    x000D                  fillHight   fillHeight    x000D                  fillWidth   fillWidth    x000D            x000D   x000D            fn fillHeight   function      x000D              var siblingsHeight   0  x000D              this siblings  div   each function      x000D                  siblingsHeight   siblingsHeight     this  height    x000D                  x000D   x000D              var height   this parent   height   - siblingsHeight  x000D              this height height   x000D             x000D   x000D    x000D            fn fillWidth   function     x000D              var siblingsWidth   0  x000D              this siblings  div   each function      x000D                  siblingsWidth       this  width    x000D                  x000D   x000D              var width  this parent   width   - siblingsWidth  x000D              this width width   x000D            x000D            x000D              box-sizing  border-box  x000D            x000D   x000D          html   x000D            x000D   x000D          html  body   fillParent   x000D              height  100   x000D              margin  0  x000D              padding  0  x000D            x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 0 2 jquery min js  gt  lt  script gt  x000D   lt div class  fillParent  style  background-color antiquewhite  gt  x000D           lt div gt  x000D              no1 x000D           lt  div gt  x000D           lt div class  fillHight  gt  x000D              no2 fill x000D           lt  div gt  x000D           lt div class  deb  gt  x000D              no3 x000D           lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

You could use calc function to calculate remaining height for 2nd div    x000D   x000D     x000D    box-sizing  border-box  x000D    x000D   x000D   div1  x000D    height  50px  x000D    background  skyblue  x000D    x000D   x000D   div2  x000D    height  calc 100vh - 50px   x000D    background  blue  x000D    x000D   lt div id  div1  gt  lt  div gt  x000D   lt div id  div2  gt  lt  div gt  x000D   x000D   x000D

User · Answer

lt div gt     lt div id  header  gt header lt  div gt     lt div id  content  gt content lt  div gt     lt div id  footer  gt footer lt  div gt   lt  div gt    header     height  200px      content     height  100     margin-bottom  -200px    padding-bottom  200px    margin-top  -200px    padding-top  200px      footer     height  200px

User · Answer

You can use this http   jsfiddle net Victornpb S8g4E 783    container       display  table      width  400px      height  400px     container  gt  div      display  table-row      height  0     container  gt  div fill      height  auto      Just apply the class  fill to any of the children to make then occupy the remaining height    lt div id  container  gt       lt div gt          Lorem ipsum      lt  div gt       lt div gt          Lorem ipsum      lt  div gt       lt div class  fill  gt     lt  -- this will fill the remaining height-- gt          Lorem ipsum      lt  div gt   lt  div gt    It works with how many children you want  no additional markup is required

User · Answer

Since you know how many pixels are occupied by the previous content  you can use the calc   function   height  calc 100  - 50px

User · Answer

Demo One way is to set the the div to position absolute and give it a top of 50px and bottom of 0px   div2       position absolute      bottom 0px      top 50px

User · Answer

You can use  display  flex    CSS property  as mentioned before by  Ayan  but I ve created a working example  https   jsfiddle net d2kjxd51

User · Answer

Use absolute positioning    x000D   x000D   div1  x000D      width  100   x000D      height  50px  x000D      background-color red   Development Only   x000D    x000D   div2  x000D      width  100   x000D      position  absolute  x000D      top  50px  x000D      bottom  0  x000D      background-color blue   Development Only   x000D    x000D   lt div id  div1  gt  lt  div gt  x000D   lt div id  div2  gt  lt  div gt  x000D   x000D   x000D

[html] How to make div occupy remaining height?

Examples related to html

Examples related to css

Examples related to xhtml