Footer doesn't stick at the bottom

Question

I've read a lot of articles and existing questions on stackoverflow. I've litteraly tried over 10 different pieces of code. It just doesn't work.

I've got a website, and I would like the footer to stick on the bottom no matter what. I mean, litteraly stick on the bottom. I do not want it to move with the height of the window of the browser. I want it to stay below all existing divs.

At the moment the footer is at the bottom of the page. But it moves with the height of the window of my browser. So, if I minimize my browser, the footer will move upwards with the height of the browser. I do not want that.

I've tried a lot, but it doesn't work. This is my current code:

body{
background-image: url('../images/bg.png');
background-repeat: repeat;
margin: 0px;
padding: 0px;
}

body, html{
    height: 100%;
}

#body{
width: 1024px;
min-height: 100%;
margin: 0 auto;
}

#footer{
clear:both;
min-height: 150px;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}

The body ID is the wrapper. The footer is outside the body wrapper

<body>
    <div id="body">
        <!-- HEADER -->
        <div id="logo"></div>
        <div id="menu">
            <ul id="hmenu">
            <!-- stuff -->
            </ul>
        </div>

        <div id="page">
            <!-- stuff -->
        </div>
    </div>

    <div id="footer">
    <!-- stuff -->
    </div>

    <div id="navigationbar"></div>



    </body>

Edit: The problem has to do with one of the divs inside the "body" div. It is being positioned using an absolute position. Is there any way to get the footer stickied properly using Ryan Fait's method, whilst using an absolute position?

Edit #2: I forgot to use "clear:both". Solved it

You're going to have to explain why that was “not the answer” as it seems to answer your question exactly. — Dour High Arch, Sep 23 '14 at 18:07
Both accepted answers (the one given to this question and the one to the link above) are the same. How couldn't this be a duplicate? Please elaborate. — Hashem Qolami, Sep 23 '14 at 21:47
@HashemQolami Nevermind. Even after my edit I agree with you. Should've done some more research. — Stefan R, Sep 24 '14 at 14:23

score 4 · Accepted Answer · answered Sep 23 '14 at 15:45

4

Ryan fait has a solution to this: http://ryanfait.com/sticky-footer/

I modified it slightly using SASS:

$footer-height: 250px; /* Set size of sticky footer in the variable: */

.main-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto (-$footer-height); /* the bottom margin is the negative value of the footer's height */
}
.push {
  clear: both;
  height: $footer-height;
}
.footer-wrapper {
    clear: both;
    min-height: $footer-height;
    background: #E7E7E7;
    padding: 50px 0;
}

You could take out the variable for use with vanilla CSS.

Your HTML would look something like this:

<div class="main-wrapper">
    <div class="wrapper"></div>
    <div class="push"></div>
</div>
<div class="footer-wrapper"></div>

answered Sep 23 '14 at 15:45

Jon Kyte

1,962
3
26
40

This is the best solution i used it very often but it is not from Ryan fait ^^. Anyway. – Steven Web Sep 23 '14 at 15:49
+1 for the Ryan Fait solution, it's really good. – Candlejack Sep 23 '14 at 15:49
@StevenWave Sorry, I only know it as Ryan Fait's work, if you could provide me with the original author i'd be happy to update the reference to the origin of the code :-) – Jon Kyte Sep 23 '14 at 15:51
I actually don't know the original author sorry but i'm using this solution about 3-4 years. I will do some reseachr maybe i can find the right one! – Steven Web Sep 23 '14 at 15:56
I noticed it is because my border is being positioned via an absolute position. It is necessarily. If I change it to relative, the div height will not expand with it's content. Is there any work-around? – Stefan R Sep 24 '14 at 13:10
Sorry, I don't understand what you mean by that? @stefan1294 – Jon Kyte Sep 24 '14 at 13:26
@JonKyte Please, ignore what I said. I forgot to use a clear:both command! – Stefan R Sep 24 '14 at 14:22

score 2 · Answer 2 · answered Sep 23 '14 at 15:46

2

I think you should use this css for footer:

#footer{
    position:fixed;
    bottom:0;
    background-image: url('../images/footerbg.png');
    background-repeat: repeat;
}

like here.

answered Sep 23 '14 at 15:46

Florin Pop

5,105
3
25
58

Arbel · Answer 3 · 2014-09-23T15:52:53.623

2

All you need:

#footer{
    position: fixed;
    bottom: 0;
    /* rest of your styles */
}

Also if you don't want content to be hidden behind the footer:

#body { /* your main div has an id of body, not to be mistaken for body tag */
    padding-bottom: 150px /* height of footer */
}

Demo http://jsfiddle.net/2mzak87o/

edited Sep 23 '14 at 15:52

answered Sep 23 '14 at 15:47

Arbel

30,599
2
28
29

score 1 · Answer 4 · answered Sep 23 '14 at 15:46

Fix the div to the browser, then force it to have a 0 margin on the bottom and left.

#footer{
  position: fixed;
  bottom: 0;
  left: 0;
  clear:both;
  min-height: 150px;
  width: 100%;
  background-image: url('../images/footerbg.png');
  background-repeat: repeat;
}

If you want the div in the middle of the bottom, create a container with width:100% and then have the footer contain "margin: 0 auto"

score 1 · Answer 5 · answered Sep 23 '14 at 15:51

1

try this :

#body {
width: 1024px;
min-height: 80%;
margin: 0 auto;
position: relative;
}

#footer {
clear: both;
min-height: 20%;
width: 100%;
background-image: url('../images/footerbg.png');
background-repeat: repeat;
}

enter image description here

answered Sep 23 '14 at 15:51

Bouraoui KACEM

821
1
8
20

Footer doesn't stick at the bottom

5 Answers5