How to stick footer always to the bottom of the page if the content is very less?

Question

The footer should remain in the bottom even when i re size the page. In my case footer is overlapping the contents when i re size the height of the page.

 .body{
     background: #00b7ea; /* Old browsers */
     font-family:Arial, Helvetica, sans-serif;
     font-size:85%;
            height: 100%;
    }

    .container{
     min-height:100%;
     position: relative;
    }
    .formContainer{
     width:30%;
        height: 100px;
     background-color:#fff;
     margin:auto;
            padding-top: 0;
     border-radius:5px;
     box-shadow:5px 5px 55px #9999;
     padding-bottom:60px;
    }
    .footer{
        position:absolute;
     width:100%;
        bottom:0;
     height:60px;
     background-color:#333;
    }

<body class="body">
       <header class="header">
     </header>
       <div class="container">
                    <div class="formContainer">
                    </div>
      <footer class="footer">
      </footer>
         </div>
     </body>

possible duplicate of [Make footer stick to bottom of page correctly](http://stackoverflow.com/questions/3443606/make-footer-stick-to-bottom-of-page-correctly) — Robin Maben, Jul 23 '13 at 06:19

score 1 · Answer 1 · edited Feb 14 '14 at 17:41

1

You should move footer tag out of the div

<header class="header">
    </header>
    <div class="container">
                <div class="formContainer">
                </div>        
     </div>
    <footer class="footer">
    </footer>

DEMO

Add height:100% to html and body, then only your container takes height 100% and leave your html code as it is.

html, body{
    height:100%
}

DEMO 2

P S - I think .body in your CSS is a mistake, it should be only body

edited Feb 14 '14 at 17:41

Jim Buck

2,383
23
42

answered Jul 23 '13 at 06:19

Sowmya

26,684
21
96
136

Problem is when i re size the height of the page and make the window smaller, the footer is overlapping the other contents of the page. I want it to always be on the bottom. It should not Come up with the page . when i re size it. – Shouvik Bhuiyan Jul 23 '13 at 06:23

score 0 · Answer 2 · answered Jul 23 '13 at 06:22

0

What you need is Sticky Footer, there are couple of ways to implement it.

http://css-tricks.com/snippets/css/sticky-footer/ (using CSS)
http://josephfitzsimmons.com/home/simple-sticky-footer-using-jquery/ (using jQuery)

answered Jul 23 '13 at 06:22

Sam

139
1

score 0 · Answer 3 · answered Jul 23 '13 at 06:23

0

try this

http://jsfiddle.net/WPYCJ/

.footer{
    position:fixed;
    width:100%;
    bottom:0;
    height:60px;
    background-color:#333;
}

answered Jul 23 '13 at 06:23

Falguni Panchal

8,873
3
27
33

nvn · Answer 4 · 2013-07-23T06:40:51.250

Try this. Thanks

CSS

 .body{
    background: #00b7ea; /* Old browsers */
    font-family:Arial, Helvetica, sans-serif;
    font-size:85%;
        height: 100%;
}

.container{
 height:90%;
background-color:#fff;
}
.formContainer{
    width:100%;
    height: 100px;
        margin:auto;
        padding-top: 0;
    border-radius:5px;
    box-shadow:5px 5px 55px #9999;
    padding-bottom:60px;
}
.footer{
    width:100%;
    bottom:0;
    height:5%;
    background-color:#333;
}

HTML

<body class="body">
    <header class="header">
    </header>
    <div class="container">
                <div class="formContainer">
                </div>
             </div>
<footer class="footer">test
        </footer>

 </body>

score 0 · Answer 5 · answered Jan 13 '15 at 19:06

0

I Had the same problem, I used this code :

<script>
    var top = $(document).height() - $("footer.main-footer").height() ; 
     $("footer.main-footer").css('top' , top);
</script>

Change .main-footer to your footer's class.

answered Jan 13 '15 at 19:06

Mostafa Kasem

400
4
12

How to stick footer always to the bottom of the page if the content is very less?

5 Answers5

Linked