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

回答1:

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.

回答2:

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.

回答3:

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.

回答4:

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>

回答5:

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

回答6:

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.

回答7:

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

回答8:

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.

回答9:

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.

回答10:

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.

来源：https://stackoverflow.com/questions/2571573/css-footer-position-stick-to-bottom-of-browser

标签

css

overflow

position

footer

fixed