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

Answer 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.

Answer 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.

Answer 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.

Answer 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>

Answer 5

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>

Answer 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.

Answer 7

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

Answer 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.

Answer 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.

Answer 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.

友情链接