How do I force a DIV block to extend to the bottom of a page even if it has no content

Question

In the markup shown below  I m trying to get the content div to stretch all the way to the bottom of the page but it s only stretching if there s content to display  The reason I want to do this is so the vertical border still appears down the page even if there isn t any content to display   Here is my HTML    lt body gt       lt form id  form1  gt       lt div id  header  gt           lt a title  Home  href  index html    gt       lt  div gt        lt div id  menuwrapper  gt           lt div id  menu  gt           lt  div gt       lt  div gt        lt div id  content  gt       lt  div gt    And my CSS   body       font-family  Trebuchet MS  Verdana  MS Sans Serif      font-size 0 9em      margin 0      padding 0    div header       width  100       height  100px     header a       background-position  100px 30px      background  transparent url site-style-images sitelogo jpg  no-repeat fixed 100px 30px      height  80px      display  block     header   menuwrapper       background-repeat  repeat      background-image  url site-style-images darkblue background color jpg      menu  menuwrapper       height 25px    div menuwrapper       width 100     menu   content       width 1024px      margin  0 auto    div menu       height  25px      background-color  50657a

User · Answer

The min-height property is not supported by all browsers. If you need your #content to extend it's height on longer pages the height property will cut it short.

It's a bit of a hack but you could add an empty div with a width of 1px and height of e.g. 1000px inside your #content div. That will force the content to be at least 1000px high and still allow longer content to extend the height when needed

User · Answer

Try   html  body       height  102      wrapper       position  relative      height  100       width  100      div       position  absolute      top  0      bottom  0      width  1000px      min-height  100       Haven t tested it yet

User · Answer

While it isn t as elegant as pure CSS  a small bit of javascript can help accomplish this    lt html gt   lt head gt   lt style type  text css  gt      div           border  1px solid  000000          lt  style gt   lt script type  text javascript  gt       function expandToWindow element             var margin   10             if  element style height  lt  window innerHeight                 element style height   window innerHeight -  2   margin                       lt  script gt   lt  head gt   lt body onload  expandToWindow document getElementById  content      gt   lt div id  content  gt Hello World lt  div gt   lt  body gt   lt  html gt

User · Answer

Try playing around with the following css rule    content       min-height  600px      height  auto  important      height  600px      Change the height to suit your page   height is mentioned twice for cross browser compatibility

User · Answer

Sticky footer with fixed height   HTML scheme    lt body gt      lt div id  wrap  gt      lt  div gt      lt div id  footer  gt      lt  div gt   lt  body gt    CSS   html  body       height  100      wrap       min-height  100       height  auto  important      height  100       margin  0 auto -60px     footer       height  60px

User · Answer

I ll try to answer the question directly in the title  rather than being hell-bent on sticking a footer to the bottom of the page   Make div extend to the bottom of the page if there s not enough content to fill the available vertical browser viewport   Demo at  drag the frame handle to see effect    http   jsfiddle net NN7ky  upside  clean  simple  downside  requires flexbox - http   caniuse com flexbox   HTML    lt body gt      lt div class div1 gt      div1 lt br gt      div1 lt br gt      div1 lt br gt     lt  div gt      lt div class div2 gt      div2 lt br gt      div2 lt br gt      div2 lt br gt     lt  div gt    lt  body gt      CSS       padding  0  margin  0     html  body     height  100      display  flex    flex-direction  column     body  gt        flex-shrink  0      div1   background-color  yellow      div2     background-color  orange    flex-grow  1      ta-da - or i m just too sleepy

User · Answer

Try http   mystrd at modern-clean-css-sticky-footer   The link above is down  but this link https   stackoverflow com a 18066619 1944643 is ok   D  Demo    lt  DOCTYPE html gt   lt head gt       lt meta charset  UTF-8  gt       lt meta name  author  content  http   mystrd at  gt       lt meta name  robots  content  noindex  nofollow  gt       lt title gt James Dean CSS Sticky Footer lt  title gt       lt style type  text css  gt          html               position  relative              min-height  100                     body               margin  0 0 100px                 bottom   footer height                padding  25px                    footer               background-color  orange              position  absolute              left  0              bottom  0              height  100px              width  100               overflow  hidden                 lt  style gt   lt  head gt   lt body gt       lt article gt           lt  -- or  lt div class  container  gt   etc  -- gt           lt h1 gt James Dean CSS Sticky Footer lt  h1 gt            lt p gt Blah blah blah blah lt  p gt           lt p gt More blah blah blah lt  p gt       lt  article gt       lt footer gt           lt h1 gt Footer Content lt  h1 gt       lt  footer gt   lt  body gt    lt  html gt

User · Answer

I think the issue would be fixed just making the html fill 100  also  might be body fills the 100  of the html but html doesn t fill 100  of the screen   Try with    html  body         height  100

User · Answer

I dont have the code  but I know I did this once using a combination of height 1000px and margin-bottom  -1000px  Try that

User · Answer

Depending on how your layout works  you might get away with setting the background on the  lt html gt  element  which is always at least the height of the viewport

User · Answer

It is not possible to accomplish this using only stylesheets  CSS   Some browsers will not accept  height  100     as a higher value than the viewpoint of the browser window   Javascript is the easiest cross browser solution  though as mentioned  not a clean or beautiful one

User · Answer

you can kinda hack it with the min-height declaration   lt div style  min-height  100   gt stuff lt  div gt

User · Answer

Try Ryan Fait s  Sticky Footer  solution   http   ryanfait com sticky-footer  http   ryanfait com resources footer-stick-to-bottom-of-page   Works across IE  Firefox  Chrome  Safari and supposedly Opera too  but haven t tested that   It s a great solution   Very easy and reliable to implement

User · Answer

You can use the  vh  length unit for the min-height property of the element itself and its parents  It s supported since IE9    lt body class  full-height  gt       lt form id  form1  gt       lt div id  header  gt           lt a title  Home  href  index html    gt       lt  div gt        lt div id  menuwrapper  gt           lt div id  menu  gt           lt  div gt       lt  div gt        lt div id  content  class  full-height  gt       lt  div gt   lt  body gt    CSS    full-height       min-height  100vh      box-sizing  border-box

User · Answer

I know this is not the best method  but I couldnt figure it out without messing my header  menu  etc positions  So     I used a table for those two colums  It was a QUICK fix  No JS needed

User · Answer

Also you might like this  http   matthewjamestaylor com blog ultimate-2-column-left-menu-pixels htm  It isn t quite what you asked for  but it might also suit your needs

User · Answer

Your problem is not that the div is not at  100  height  but that the container around it is not This will help in the browser I suspect you are using   html body   height 100       You may need to adjust padding and margins as well  but this will get you 90  of the way there If you need to make it work with all browsers you will have to mess around with it a bit   This site has some excellent examples   http   www brunildo org test html body 0 html http   www brunildo org test html body 11b html http   www brunildo org test index html  I also recommend going to http   quirksmode org

[css] How do I force a DIV block to extend to the bottom of a page even if it has no content?

Examples related to css

Examples related to html

Examples related to border