CODEWITHSUNDEEP
htmlcss
maniteja
maniteja

Reputation: 717

how to get a footer div to the bottom of the page?

I've been trying for hours now couldn't find any solution for my problem I've made my footer stick to the bottom by position:fixed;bottom:0; the footer gets to bottom but when my content is more the footer doesn't expand to the bottom relative to the content so i've did this made a container div and placed my footer in it 

<div id="container">
<div id="body">
</div>
<div id="footer">
</div>
</div>

#container
{
   position:relative;
}
#footer
{
   position:absolute;
   bottom:0;
   height:30px;
}

so far so good but when i try to increase my footer size(height) to 300PX it occupies my entire page I just want the footer to be at bottom with same height i have even tried making the #body{min-height:500px;} but my footer still doesn't go down with 300px of height.

To be exact i want a footer like stackoverflow but when there is no content i should still stick to bottom with a min body height.

Upvotes: 1

Views: 101

Answers (4)

user3304709
user3304709

Reputation:

Try this:

<div id="container">
<div id="body">
this is body
</div>
<div id="footer">
this is footer
</div>
</div>

#container
{
border:solid red thin;
position:relative;
height:100px;
}
#footer
{
border:solid red thin;
position:absolute;
bottom:0;
height:30px;
width:100%;
}

demo link:http://jsfiddle.net/yVC8r/2/

Upvotes: 0

Dr M L M J
Dr M L M J

Reputation: 2397

Replace -

    <div id="container">
    <div id="body">
    </div>
    <div id="footer">
    </div>
    </div>

with following code - (try with closing div id="body" after footer division)

   <div id="container">
   <div id="body">
   <div id="footer"> 
   </div>
   </div>
   </div>

jsfiddle - http://jsfiddle.net/nMVA5/

Upvotes: 0

Kiran
Kiran

Reputation: 125

Hi please follow the link http://jsfiddle.net/cooolkiran/yVC8r/

 <div class="page-wrap"> Content</div>
<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


    * {
      margin: 0;
    }
    html, body {
      height: 100%;
    }
    .page-wrap {
      min-height: 100%;
      /* equal to footer height */
      margin-bottom: -142px; 
    }
    .page-wrap:after {
      content: "";
      display: block;
    }
    .site-footer, .page-wrap:after {
      /* .push must be the same height as footer */
      height: 142px; 
    }
    .site-footer {
      background: orange;
    }

Upvotes: 1

jlblatt
jlblatt

Reputation: 266

Add:

html, body {height: 100%;}

to your CSS and see if that works.

Upvotes: 0

Related Questions