CODEWITHSUNDEEP
cssoverflowpositionfooterfixed
brightmist.co.uk
brightmist.co.uk

Reputation: 515

css footer position stick to bottom of browser?

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

Upvotes: 11

Views: 65853

Answers (10)

Jaime Hablutzel
Jaime Hablutzel

Reputation: 6342

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>

Upvotes: 2

Koen
Koen

Reputation: 140

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.

Upvotes: 0

Rory O&#39;Kane
Rory O&#39;Kane

Reputation: 30398

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.

Upvotes: 0

Boondog
Boondog

Reputation: 411

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.

Upvotes: 41

digitaldreamer
digitaldreamer

Reputation: 55352

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>

Upvotes: 3

pokrate
pokrate

Reputation: 3974

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.

Upvotes: 0

brightmist.co.uk
brightmist.co.uk

Reputation: 515

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

Upvotes: 0

roryf
roryf

Reputation: 30160

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.

Upvotes: 9

Josh
Josh

Reputation: 11070

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.

Upvotes: 0

Steve
Steve

Reputation: 5853

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.

Upvotes: 5

Related Questions