How to keep the footer always at the bottom of the page?

Question

If i have less contents on the page then the footer stays on the middle of the page instead of at the bottom. I just want the footer will stay always at the bottom of the page after all the contents of the page. I tried different ways and found few solutions in stack but none of them are working as per my need. Most of the posts are 3/4 years of old. So, I'm wondering if anyone has any effective solutions that works fine. I'm using asp.net.I'm not good at css so may be I'm doing something wrong. My page format is like this-

<html>
    <head>
    <body>
        <form>
            <div class="clear">
                <div class="container">
                    <ucl:headercontrol />
                    <asp:updatePanel>
                    </asp:updatePanel>
                </div>
            </div>
            <div class="footer">
                <p>xxxxx</p>
            </div>
        </form>
    </body>
</html>

This is just my page skeleton. I would appreciate if any can give me any idea.

See either of these tutorials on sticky footers: http://www.cssstickyfooter.com/using-sticky-footer-code.html AND http://css-tricks.com/snippets/css/sticky-footer/ — Pedro, May 16 '14 at 19:09

score 2 · Accepted Answer · answered May 16 '14 at 19:15

In order to achieve what you need use this basic structure:

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

And the following CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

You can even add a small bit of CSS to make sure this is backwards compatible in all browsers:

#container {
   height:100%;
}

score 1 · Answer 2 · answered May 16 '14 at 19:10

1

in css

div.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 50px;
}

answered May 16 '14 at 19:10

Dylan Hayes

2,331
1
23
33

score 0 · Answer 3 · answered May 16 '14 at 19:10

0

add this to your css:

html, body, form{ height:100%; }
.clear { height:90%;}
.footer { height: 10%;}

answered May 16 '14 at 19:10

Jai

74,255
12
74
103

How to keep the footer always at the bottom of the page?

3 Answers3