Search code examples
csslayouthtmlsticky-footer

Layout content miscalculated from sticky footer

I have a layout with a sticky footer. The problem is that the actual height of the main center content is incorrect. Although it hides behind the footer and the end user does not see this, it causes problem when centering a map for example.

How do I shorten the height of the content so it stays above the footer so the real content height is rendered (while maintaining 100%). To illustrate, I have a working example here: http://jsfiddle.net/mp8nr/43/

When you use Firebug to hover over the element, you will see that the main content is actually underneath the sticky footer. I just need to move it up while not cutting off the top but all my attempts have failed. I would greatly appreciate any help.

enter image description here

Solution

  • EDIT: There was more than one thing wrong with your layout. Here is a fixed version: http://jsfiddle.net/Ym3YP/

    Okay, so you haven't actually implemented a sticky footer. You just put a footer with fixed positioning. When you use either fixed or absolute positioning, the element in question is taken out of your HTML flow which is why your main-content div extends all the way to the bottom. It does not see or recognize the footer being in the way!

    Here is how to properly implement a sticky footer that avoids these issues:

    Taken from Ryan Fait:

    Sample HTML:

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

    Sample CSS: 

    * {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

    Also, check out this Smashing Magazine article It explains in depth the basics of CSS flow which should help you avoid these types of issues. It's a must read for anyone getting into CSS and will save you from many headaches in the future.