Stretch relative div to footer/bottom of the page

Question

I've had alot of trouble keeping my footer on the bottom, when my main div is short on content. But I fixed it with the sticky footer trick. But unfortunately I still have this problem where my main div won't stretch all the way down to the footer when it's short on content. I have fixed this with JS by adding an extra div in the empty space if the main div's bottom edge + the footer were smaller than the viewport. But that's no longer an option since i want to support non js users.

html, body {
  height: 100%;
  background-color: #678dae;
  
  margin: 0px;
  padding: 0px;
}

#wrap {
  min-height: 100%;
}


#main {
  
  width: 70%;
  
  /* I need them to be centered like this because my div is being resized from time to time */
  margin-left: auto;
  margin-right: auto;
  
  overflow:auto;
  padding-bottom: 150px;
  background-color: #fff;
  
}  


#footer {position: relative;
 margin-top: -150px; /* negative value of footer height */
 height: 150px;
    background-color: #333;
 clear:both;
}

<div id="wrap">

 <div id="main">

  <div id="content">
             <p>Div content</p>
          
          
            <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->     
          
     
  </div> 

 </div>

</div>

<div id="footer">
 <p>Footer content</p>
</div>

Possible duplicate of [CSS to make HTML page footer stay at bottom of the page with a minimum height](http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height) — noahnu, Apr 16 '16 at 19:29

score 0 · Answer 1 · answered Apr 16 '16 at 19:29

0

Please try this:

#footer {
    background-color: #333;
    bottom: 0;
    height: 150px;
    position: absolute;
    width: 100%;
}

answered Apr 16 '16 at 19:29

satya

1,145
8
12

The footer is already located where it should be and that would create problems when there is more content than the viewport can fit – Johan Sundman Apr 16 '16 at 19:33

score 0 · Answer 2 · answered Apr 16 '16 at 19:30

html, body {
  height: 100%;
  background-color: #678dae;
  
  margin: 0px;
  padding: 0px;
}

#wrap {
  min-height: 100%;
}


#main {
  
  width: 70%;
  
  /* I need them to be centered like this because my div is being resized from time to time */
  margin-left: auto;
  margin-right: auto;
  
  overflow:auto;
  padding-bottom: 150px;
  background-color: #fff;
  
}  


#footer {
  position: fixed;
 margin-top: -150px; /* negative value of footer height */
 height: 25px;
    background-color: #333;
    bottom:0;
  width:100%;
}

<div id="wrap">

 <div id="main">

  <div id="content">
             <p>Div content</p>
          
          
            <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> -->     
          
     
  </div> 

 </div>

</div>

<div id="footer">
 <p>Footer content</p>
</div>

I have changed few footer properties

score 0 · Answer 3 · answered Apr 16 '16 at 19:52

0

height: inherit; may help.. this usually helps with height aspects...

answered Apr 16 '16 at 19:52

Tylaw38

65
1
2
10

Stretch relative div to footer/bottom of the page

3 Answers3