How to make the main content div fill height of screen with css

Question

So I have a webpage with a header  mainbody  and footer  I want the mainbody to fill 100  of the page  fill 100  in between footer and header  My footer is position absolute with bottom  0  Everytime I try to set the mainbody to 100  height or change position or something it will also overflow the header  If if set the body to position absolute with top  40  cause my header is 40px high   it will just go 40px too far down  creating a scroll bar   I created a simple html file since i cannot actually post the entire page css from the actual project  With the sample code  even though the maincontent body fills the screen  it goes 40px too far down  cause of the header I assume     x000D   x000D  html  x000D  body   x000D    margin  0  x000D    padding  0  x000D    x000D   x000D  header   x000D    height  40px  x000D    width  100   x000D    background-color  blue  x000D    x000D   x000D   maincontent   x000D    background-color  green  x000D    height  100   x000D    width  100   x000D    x000D   x000D  footer   x000D    height  40px  x000D    width  100   x000D    background-color  grey  x000D    position  absolute  x000D    bottom  0  x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt test lt  title gt  x000D     lt link href  style css  rel  stylesheet  type  text css  gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt header gt  lt  header gt  x000D     lt div id  maincontent  gt  x000D   x000D     lt  div gt  x000D   x000D     lt footer gt  lt  footer gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    Anyone knows the answer

User · Answer

Relative values like  height 100  will use the parent element in HTML like a reference  to use relative values in height you will need to make your html and body tags had 100  height like that   HTML   lt body gt       lt div class  content  gt  lt  div gt   lt  body gt    CSS  html  body       height  100       content       background  red      width  100       height  100       http   jsfiddle net u91Lav16 1

User · Answer

No Javascript  no absolute positioning and no fixed heights are required for this one   Here s an all CSS   CSS only method which doesn t require fixed heights or absolute positioning   CSS   container      display  table     content      display  table-row     height  100       content-body      display  table-cell      HTML   lt div class  container  gt     lt header class  header  gt       lt p gt This is the header lt  p gt     lt  header gt     lt section class  content  gt       lt div class  content-body  gt         lt p gt This is the content  lt  p gt       lt  div gt     lt  section gt     lt footer class  footer  gt       lt p gt This is the footer  lt  p gt     lt  footer gt   lt  div gt    See it in action here  http   jsfiddle net AzLQY   The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself  You can also choose to limit their height with css

User · Answer

Although this might sounds like an easy issue  but it s actually not   I ve tried many things to achieve what you re trying to do with pure CSS  and all my tries were failure  But   there s a possible solution if you use javascript or jquery   Assuming you have this CSS    myheader       width  100      mybody       width  100      myfooter       width  100       Assuming you have this HTML    lt div id  myheader  gt HEADER lt  div gt   lt div id  mybody  gt BODY lt  div gt   lt div id  myfooter  gt FOOTER lt  div gt    Try this with jquery    lt script gt        document  ready function             var windowHeight     window  height      get the browser visible height on screen            var headerHeight       myheader   height      get the header visible height on screen            var bodyHeight       mybody   height      get the body visible height on screen            var footerHeight       myfooter   height      get the footer visible height on screen            var newBodyHeight   windowHeight - headerHeight - footerHeight          if newBodyHeight  gt  0  amp  amp  newBodyHeight  gt  bodyHeight                    mybody   height newBodyHeight                      lt  script gt    Note  I m not using absolute positioning in this solution  as it might look ugly in mobile browsers

User · Answer

Well  there are different implementations for different browsers   In my mind  the simplest and most elegant solution is using CSS calc    Unfortunately  this method is unavailable in ie8 and less  and also not available in android browsers and mobile opera  If you re using separate methods for that  however  you can try this  http   jsfiddle net uRskD   The markup    lt div id  header  gt  lt  div gt   lt div id  body  gt  lt  div gt   lt div id  footer  gt  lt  div gt    And the CSS   html  body       height  100       margin  0     header       background   f0f      height  20px     footer       background   f0f      height  20px     body       background   0f0      min-height  calc 100  - 40px       My secondary solution involves the sticky footer method and box-sizing  This basically allows for the body element to fill 100  height of its parent  and includes the padding in that 100  with box-sizing  border-box   http   jsfiddle net uRskD 1   html  body       height  100       margin  0     header       background   f0f      height  20px      position  absolute      top  0      left  0      right  0     footer       background   f0f      height  20px      position  absolute      bottom  0      left  0      right  0     body       background   0f0      min-height  100       box-sizing  border-box      padding-top  20px      padding-bottom  20px      My third method would be to use jQuery to set the min-height of the main content area  http   jsfiddle net uRskD 2   html  body       height  100       margin  0     header       background   f0f      height  20px     footer       background   f0f      height  20px     body       background   0f0      And the JS     function         headerHeight       header   height        footerHeight       footer   height        windowHeight     window  height           body   css  min-height   windowHeight - headerHeight - footerHeight

User · Answer

This allows for a centered content body with min-width for my forms to not collapse funny   html       overflow-y  scroll      height  100       margin  0px auto      padding  0     body       height  100       margin  0px auto      max-width  960px      min-width  750px      padding  0    div footer       width  100       position  absolute      bottom  0      left  0      height  60px     div wrapper       height  auto  important      min-height  100       height  100       position  relative      overflow  hidden     div pageContent       padding-bottom  60px     div header       width  100       And my layout page looks like     lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  gt    lt head gt       lt title gt  lt  title gt   lt  head gt   lt body gt   lt div id  wrapper  gt           lt div id  header  gt  lt  div gt           lt div id  pageContent  gt  lt  div gt           lt div id  footer  gt  lt  div gt       lt  div gt   lt  body gt   lt  html gt    Example here  http   data nwtresearch com   One more note  if you want the full page background like the code you added looks like  remove the height  auto  important  from the wrapper div  http   jsfiddle net mdares a8VVw

User · Answer

Not sure exactly what your after  but I think I get it   A header - stays at the top of the screen  A footer - stays at the bottom of the screen  Content area -  fits the space between the footer and the header   You can do this by absolute positioning or with fixed positioning    Here is an example with absolute positioning  http   jsfiddle net FMYXY 1   Markup    lt div class  header  gt Header lt  div gt   lt div class  mainbody  gt Main Body lt  div gt   lt div class  footer  gt Footer lt  div gt    CSS     header  outline 1px solid red  height  40px  position absolute  top 0px  width 100     mainbody  outline 1px solid green  min-height 200px  position absolute  top 40px  width 100   height 90     footer  outline 1px solid blue  height 20px  position absolute  height 25px bottom 0  width 100        To make it work best  I d suggest using   instead of pixels  as you will run into problems with different screen device sizes

User · Answer

There is a CSS unit called viewport height   viewport width    Example   mainbody height  100vh   similarly html body width  100vw    or 90vh   90  of the viewport height      IE9  and most modern browsers

User · Answer

Using top  40px and bottom  40px  assuming your footer is also 40px  with no defined height  you can get this to work    header       width  100       height  40px      position  absolute      top  0      background-color red     mainBody       width  100       top  40px      bottom  40px      position  absolute      background-color  gray     footer       width  100       height  40px      position  absolute      bottom  0      background-color  blue      JSFiddle

User · Answer

These are not necessary   remove height in    remove jQuery   Stretch div using bottom  amp  top      mainbody      position  absolute      top  40px     Header Height        bottom  20px     Footer Height        width  100       check my code    http   jsfiddle net aslancods mW9WF   or check here    x000D   x000D  body   x000D      margin 0  x000D    x000D   x000D   header   x000D      height  40px  x000D      background-color  red  x000D    x000D   x000D   mainBody   x000D      background-color  yellow  x000D      position  absolute  x000D      top  40px  x000D      bottom  20px  x000D      width 100   x000D    x000D   x000D   content   x000D      color  fff  x000D    x000D   x000D   footer   x000D      height  20px  x000D      background-color  blue  x000D       x000D      position  absolute  x000D      bottom  0  x000D      width 100   x000D    x000D   lt div class  header   gt  x000D       amp nbsp  x000D   lt  div gt  x000D   lt div class  mainBody  gt  x000D       amp nbsp  x000D       lt div class  content   gt Hello world lt  div gt  x000D   lt  div gt  x000D   lt div class  footer  gt  x000D       amp nbsp  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model   All major browsers and IE11  support Flexbox  For IE 10 or older  or Android 4 3 and older  you can use the FlexieJS shim   Note how simple the markup and the CSS are  No table hacks or anything     html  body     height  100     margin  0  padding  0      to avoid scrollbars        wrapper     display  flex      use the flex model      min-height  100     flex-direction  column      learn more  http   philipwalton github io solved-by-flexbox demos sticky-footer         header     background  yellow    height  100px      can be variable as well        body     flex  1    border  1px solid orange      footer    background  lime       lt div id  wrapper  gt     lt div id  header  gt Title lt  div gt     lt div id  body  gt Body lt  div gt     lt div id  footer  gt      Footer lt br  gt      of lt br  gt      variable lt br  gt      height lt br  gt     lt  div gt   lt  div gt      In the CSS above  the flex property shorthands the flex-grow  flex-shrink  and flex-basis properties to establish the flexibility of the flex items  Mozilla has a good introduction to the flexible boxes model

[javascript] How to make the main content div fill height of screen with css

Examples related to javascript

Examples related to html

Examples related to css