css footer position stick to bottom of browser?

Question

I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background. Is there a solution better than using position:fixed or absolute?

I think there are possibly other styles over-riding some tests I do in firebug.

Thanks for your help Regards Judi

score 41 · Answer 1 · edited Dec 13 '11 at 18:18

41

CSS:

.podbar {
    bottom:0;
    position:fixed;
    z-index:150;
    _position:absolute;
    _top:expression(eval(document.documentElement.scrollTop+
        (document.documentElement.clientHeight-this.offsetHeight)));
    height:35px;
}

HTML:

<div class="podbar">
    Put your footer here
</div>

This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5px so it doesn't overlay your content.

Works in pretty much every browser I have tested.

edited Dec 13 '11 at 18:18

Vimal

1,266
1
9
16

answered Dec 13 '11 at 14:36

Boondog

411
4
2

you have position declared twice in here? – Feb 27 '12 at 15:37
3

@iwayneo That’s probably on purpose. It looks like the [CSS underscore hack](http://en.wikipedia.org/wiki/CSS_filter#Underscore_hack), with exploits a parsing bug to make Internet Explorer 6 and below read different styles from higher versions and other browsers. – Rory O'Kane Jun 06 '12 at 15:17

score 9 · Answer 2 · answered Apr 03 '10 at 15:18

9

I've used the technique in this article before: CSS layout: 100% height with header and footer. It does require some extra markup in your HTML.

answered Apr 03 '10 at 15:18

roryf

29,592
16
81
103

WOW thanks this sounds great. It won't weork on my theme though so I might try it on a different one :) – brightmist.co.uk Apr 03 '10 at 15:29
That's pretty slick. I'm on my netbook so I can't test it in other browsers though- are there any it doesn't work in?.. IE6? – Steve Apr 03 '10 at 15:33
I've just implemented this solution on my new portfolio :) – Steve Apr 03 '10 at 16:27
roryf, that's a nice, simple explanation. thanks for the link. – ghoti Dec 13 '11 at 17:01

score 5 · Accepted Answer · edited May 23 '17 at 11:54

5

This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.

You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.

If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.

edited May 23 '17 at 11:54

Community

1
1

answered Apr 03 '10 at 15:12

Steve

5,771
4
34
49

Now I feel determined to come up with a CSS only solution ;-) – Josh Apr 03 '10 at 15:18

digitaldreamer · Answer 4 · 2010-04-03T16:09:18.810

3

Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest your footer with position: absolute, bottom: 0;

/* css */
html, body {
    height: 100%;
}

#container {
    min-height: 100%;
    position: relative;
}

#footer {
    position: absolute;
    bottom: 0;
}


<!-- html -->
<html>
<head></head>

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

edited Apr 03 '10 at 16:09

answered Apr 03 '10 at 15:56

digitaldreamer

52,552
5
33
28

Identical to what Rory Fitzpatrick posted, minus IE6 compatibility and working demo. – Steve Apr 03 '10 at 17:33

score 2 · Answer 5 · edited Mar 06 '21 at 14:45

Here you have an example and explanation http://ryanfait.com/sticky-footer/

Edit: Since that site is offline, here is another example of this working: https://gist.github.com/XtofK/5317209 and https://codepen.io/griffininsight/pen/OMexrW

document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
  height: 50px; /* '.push' must be the same height as 'footer' */
}

footer {
  
}

<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Ryan Fait's sticky footer is the best! – inorganik Mar 27 '15 at 20:32 — inorganik, Mar 27 '15 at 20:32

score 0 · Answer 6 · answered Jun 06 '12 at 15:30

0

If you use the Compass library for Sass, there is also another option. You can use Compass’s sticky-footer mixin (demo). It requires that the footer be fixed-height, and that your HTML has a certain general structure.

answered Jun 06 '12 at 15:30

Rory O'Kane

29,210
11
96
131

score 0 · Answer 7 · answered Apr 03 '10 at 15:16

You could set a min-height on #content. This won't fix the footer to the bottom of the browser specifically, but will ensure that you can always see a certain amount of the background.

As an alternative, using JavaScript, you could determine the height of the browser window and then calculate the min-height for #content, and apply it using JavaScript. This would ensure the footer is always in the correct place.

score 0 · Answer 8 · answered Apr 03 '10 at 15:22

0

I've figured it out. Html had a css property for the background saying the colour white.

answered Apr 03 '10 at 15:22

brightmist.co.uk

531
5
18
47

score 0 · Answer 9 · answered Apr 03 '10 at 16:03

0

I always prefer page wise footers because of variable content on pages. I use a top margin of 5em for my footers. Most often than not, we know the height of content that can occur on pages.

answered Apr 03 '10 at 16:03

pokrate

3,954
7
30
36

score 0 · Answer 10 · answered Sep 22 '15 at 10:17

Don't use position:absolute use position:relative instead.

.footer {
   z-index:99;
   position:relative;
   left:0;
   right:0;
   bottom:0;
}

position: absolute will stick it to the bottom of the screen while position relative won't ignore other divs, so it will stay at the bottom of the full page.

css footer position stick to bottom of browser?

10 Answers10

Linked