Get div to take up 100 body height minus fixed-height header and footer

Question

From my research  this appears to be an absolutely classic CSS question  but I can t find a definitive answer - so StackOverflow it is    How do I set a content div to take up 100  of the body height  minus the height taken up by a fixed-height header and footer    lt body gt     lt header gt title etc lt  header gt     lt div id  content  gt body content lt  div gt     lt footer gt copyright etc lt  footer gt   lt  body gt     CSS html  body      height  100     header      height  50px    footer      height  50px     content      height  100  of the body height  minus header  amp  footer     I would like to use pure CSS  and for the answer to be bulletproof across browsers

User · Answer

Here s a solution that doesn t use negative margins or calc  Run the snippet below to see the final result   Explanation  We give the header and the footer a fixed height of 30px and position them absolutely at the top and bottom  respectively  To prevent the content from falling underneath  we use two classes  below-header and above-footer to pad the div above and below with 30px   All of the content is wrapped in a position  relative div so that the header and footer are at the top bottom of the content and not the window   We use the classes fit-to-parent and min-fit-to-parent to make the content fill out the page  This gives us a sticky footer which is at least as low as the window  but hidden if the content is longer than the window   Inside the header and footer  we use the display  table and display  table-cell styles to give the header and footer some vertical padding without disrupting the shrink-wrap quality of the page   Giving them real padding can cause the total height of the page to be more than 100   which causes a scroll bar to appear when it isn t really needed     x000D   x000D   fit-parent   x000D      height  100   x000D      margin  0  x000D      padding  0  x000D    x000D   min-fit-parent   x000D      min-height  100   x000D      margin  0  x000D      padding  0  x000D    x000D   below-header   x000D      padding-top  30px  x000D    x000D   above-footer   x000D      padding-bottom  30px  x000D    x000D   header   x000D      position  absolute  x000D      top  0  x000D      height  30px  x000D      width  100   x000D    x000D   footer   x000D      position  absolute  x000D      bottom  0  x000D      height  30px  x000D      width  100   x000D    x000D   x000D     helper classes    x000D   x000D   padding-lr-small   x000D      padding  0 5px  x000D    x000D   relative   x000D      position  relative  x000D    x000D   auto-scroll   x000D    overflow  auto  x000D    x000D     these two classes work together to create vertical centering    x000D   valign-outer   x000D      display  table  x000D    x000D   valign-inner   x000D      display  table-cell  x000D      vertical-align  middle  x000D    x000D   lt html class  fit-parent  gt  x000D     lt body class  fit-parent  gt  x000D   lt div class  min-fit-parent auto-scroll relative  style  background-color  lightblue  gt  x000D   lt div class  header valign-outer  style  background-color  black  color  white   gt  x000D           lt div class  valign-inner padding-lr-small  gt  x000D              My webpage x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  fit-parent above-footer below-header  gt  x000D           lt div class  fit-parent  id  main-inner  gt  x000D            Lorem ipsum doloris finding dory Lorem ipsum doloris finding x000D            dory Lorem ipsum doloris finding dory Lorem ipsum doloris x000D            finding dory Lorem ipsum doloris finding dory Lorem ipsum x000D            doloris finding dory Lorem ipsum doloris finding dory Lorem x000D            ipsum doloris finding dory Lorem ipsum doloris finding dory x000D            Lorem ipsum doloris finding dory Lorem ipsum doloris finding x000D            dory Lorem ipsum doloris finding dory Lorem ipsum doloris x000D            finding dory Lorem ipsum doloris finding dory Lorem ipsum x000D            doloris finding dory Lorem ipsum doloris finding dory Lorem x000D            ipsum doloris finding dory Lorem ipsum doloris finding dory x000D            Lorem ipsum doloris finding dory Lorem ipsum doloris finding x000D            dory Lorem ipsum doloris finding dory Lorem ipsum doloris x000D            finding dory Lorem ipsum doloris finding dory Lorem ipsum x000D            doloris finding dory Lorem ipsum doloris finding dory Lorem x000D            ipsum doloris finding dory Lorem ipsum doloris finding dory x000D            Lorem ipsum doloris finding dory Lorem ipsum doloris finding x000D            dory Lorem ipsum doloris finding dory Lorem ipsum doloris x000D            finding dory Lorem ipsum doloris finding dory Lorem ipsum x000D            doloris finding dory Lorem ipsum doloris finding dory Lorem x000D            ipsum doloris finding dory Lorem ipsum doloris finding dory x000D            Lorem ipsum doloris finding dory Lorem ipsum doloris finding x000D            dory Lorem ipsum doloris finding dory Lorem ipsum doloris x000D            finding dory Lorem ipsum doloris finding dory Lorem ipsum x000D            doloris finding dory Lorem ipsum doloris finding dory Lorem x000D            ipsum doloris finding dory Lorem ipsum doloris finding dory x000D            Lorem ipsum doloris finding dory Lorem ipsum doloris finding x000D            dory Lorem ipsum doloris finding dory Lorem ipsum doloris x000D            finding dory Lorem ipsum doloris finding dory Lorem ipsum x000D            doloris finding dory Lorem ipsum doloris finding dory Lorem x000D            ipsum doloris finding dory Lorem ipsum doloris finding dory x000D            Lorem ipsum doloris finding dory Lorem ipsum doloris finding x000D            dory Lorem ipsum doloris finding dory Lorem ipsum doloris x000D            finding dory Lorem ipsum doloris finding dory Lorem ipsum x000D            doloris finding dory Lorem ipsum doloris finding dory Lorem x000D            ipsum doloris finding dory Lorem ipsum doloris finding dory x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  footer valign-outer  style  background-color  white  gt  x000D           lt div class  valign-inner padding-lr-small  gt  x000D               amp copy  2005 Old Web Design x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D       lt  body gt  x000D     lt  html gt  x000D   x000D   x000D

User · Answer

this version will work in all the latest browsers and ie8 if you have the modernizr script  if not just change header and footer into divs      Fiddle   x000D   x000D  html  x000D  body   x000D    min-height  100   x000D    padding  0  x000D    margin  0  x000D    x000D   x000D   wrapper   x000D    padding  50px 0  x000D    position  absolute  x000D    top  0  x000D    bottom  0  x000D    left  0  x000D    right  0  x000D    x000D   x000D   content   x000D    min-height  100   x000D    background-color  green  x000D    x000D   x000D  header   x000D    margin-top  -50px  x000D    height  50px  x000D    background-color  red  x000D    x000D   x000D  footer   x000D    margin-bottom  -50px  x000D    height  50px  x000D    background-color  red  x000D    x000D   x000D  p   x000D    margin  0  x000D    padding  0 0 1em 0  x000D    x000D   lt div id  wrapper  gt  x000D     lt header gt dfs lt  header gt  x000D     lt div id  content  gt  x000D     lt  div gt  x000D     lt footer gt sdf lt  footer gt  x000D   lt  div gt  x000D   x000D   x000D    Scrolling with content   Fiddle

User · Answer

Trying to calculate the header and footer is bad    A design should be simple  self explanatory  Plain easy  Calculations are just   not easy  Not easy for human and a bit hard on machines   What you re looking for is a subset of the Holy Grail design   Here s an implementation using the flex display  It includes side bars in addition to the footer and header  Enjoy    lt  DOCTYPE html gt   lt html style  height  100   gt     lt head gt       lt meta charset utf-8   gt       lt title gt Holy Grail lt  title gt       lt  -- Reset browser defaults -- gt       lt link rel  stylesheet  href  reset css  gt     lt  head gt     lt body style  display  flex  height  100   flex-direction  column  gt       lt div gt HEADER lt br  gt ------------      lt  div gt       lt  -- No need for  flex-direction  row  because it s the default value -- gt       lt div style  display  flex  flex  1  gt         lt div gt NAV  lt  div gt         lt div style  flex  1  overflow  auto  gt          CONTENT - START lt br  gt           lt script gt          for  var i 0   i lt 1000     i              document write   Very long content                        lt  script gt           lt br  gt CONTENT - END        lt  div gt         lt div gt  SIDE lt  div gt       lt  div gt       lt div gt ------------ lt br  gt FOOTER lt  div gt     lt  body gt   lt  html gt

User · Answer

As far as it is not cross browser solution  you might be take advantage of using calc expression  to achive that   html  body     height  100     header            height  50px   background-color  tomato     content     height  -moz-calc 100  - 100px      Firefox     height  -webkit-calc 100  - 100px      Chrome  Safari     height  calc 100  - 100px      IE9  and future browsers     background-color  yellow    footer     height  50px   background-color  grey      Example at JsFiddle  If you want to know more about calc expression  you d better to visit this site

User · Answer

The new  modern way to do this is to calculate the vertical height by subtracting the height of both the header and the footer from the vertical-height of the viewport     CSS header      height  50px    footer      height  50px     content      height  calc 100vh - 50px - 50px

User · Answer

You can take advatange of the css property Box Sizing    content        height  100       -webkit-box-sizing  border-box     Safari Chrome  other WebKit        -moz-box-sizing  border-box        Firefox  other Gecko        box-sizing  border-box             Opera IE 8         padding-top  50px      margin-top  -50px      padding-bottom  50px      margin-bottom  -50px      See the JsFiddle

User · Answer

This question has been pretty well answered  but I m taking the liberty of adding a javascript solution   Just give the  element that you want to  expand  the id footerspacerdiv  and this javascript snippet will expand that div until the page takes up the full height of the browser window     It works based on the observation that  when a page is less than the full height of the browser window  document body scrollHeight is equal to document body clientHeight   The while loop increases the height of footerspacerdiv until document body scrollHeight is greater than document body clientHeight   At this point  footerspacerdiv will actually be 1 pixel too tall  and the browser will show a vertical scroll bar   So  the last line of the script reduces the height of footerspacerdiv by one pixel to make the page height exactly the height of the browser window   By placing footerspacerdiv just above the  footer  of the page  this script can be used to  push the footer down  to the bottom of the page  so that on short pages  the footer is flush with the bottom of the browser window    lt script gt        expand footerspacer div so that footer goes to bottom of page on short pages           var objSpacerDiv document getElementById  footerspacer                var bresize 0        while document body scrollHeight lt  document body clientHeight        objSpacerDiv style height  objSpacerDiv clientHeight 1   px       bresize 1                     if bresize    objSpacerDiv style height  objSpacerDiv clientHeight-1   px                      lt  script gt

User · Answer

This still came up as the top Google result when I was trying to find an answer to this question   I didn t have to support older browsers in my project and I feel like I found a better  simpler solution in flex-box   The CSS snippet below is all that is necessary   I have also shown how to make the main content scrollable if the screen height is too small    x000D   x000D  html  x000D  body   x000D    height  100   x000D    display  flex  x000D    flex-direction  column  x000D    x000D  header   x000D    min-height  60px  x000D    x000D  main   x000D    flex-grow  1  x000D    overflow  auto  x000D    x000D  footer   x000D    min-height  30px  x000D    x000D   lt body style  margin  0px  font-family  Helvetica  font-size  18px   gt  x000D     lt header style  background-color  lightsteelblue  padding  2px   gt Hello lt  header gt  x000D     lt main style  overflow  auto  background-color  lightgrey  padding  2px   gt  x000D       lt article style  height  400px   gt  x000D        Goodbye x000D       lt  article gt  x000D     lt  main gt  x000D     lt footer style  background-color  lightsteelblue  padding  2px   gt I don t know why you say   Goodbye   I say   Hello   lt  footer gt  x000D   lt  body gt  x000D   x000D   x000D

[css] Get div to take up 100% body height, minus fixed-height header and footer

Examples related to css