CODEWITHSUNDEEP
csssticky-footer
djt
djt

Reputation: 7535

CSS Sticky Footer - Never works right for me

I've been trying to make this work for a while and it never seems to work out. I think its because my HTML structure is slightly different than the ones in the example. My problem is, on pages that are smaller than the viewport, the footer is not automatically pushed to the bottom, and the #main div is not extended to the footer.

Here's my HTML:

<html>
    <body>
        <div id='container'>
            <div id='main'>
                <div id='content'> </div>
            </div>
            <div id='footer'> </div>
        </div>
     </body>
</html>

And here would be my basic CSS, without implementation of CSS Sticky Footer:

div#container {
    width:960px;
    margin:0 auto;
}
div#main {
    background-color:black
    padding-bottom:30px;
}

div#content {
    width:425px;
}

div#footer {
    position:relative;
    bottom:0;
    width:inherit;
    height:90px;
}

To clarify: Lets say the background of div#main is black. Now lets say, on a page, there's only 1 line of text in div#main. So I want to make the #main area extend all the way down to the footer (which is at the bottom of the page) even when there isn't enough content to force that to happen. make sense?

And One more thing. The #main area has a different background color than the body. So the #main background has to extend all the way down to the footer, cause if there's a gap, the body color peaks through instead

Upvotes: 2

Views: 1454

Answers (5)

Beez
Beez

Reputation: 2101

I know the html is structured differently than what you're working with, but perhaps you can alter your core structure to mimic this (because it works): CSS Sticky Footer

It looks like this group has done a lot of research on the topic and have found this it be the best (maybe the only?) way...through many different versions.

Upvotes: 0

cyrotello
cyrotello

Reputation: 747

Here you go: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

EDIT

Using the technique in the article above (tested - and works in fiddle):

HTML

<html>
    <head>
    </head>
    <body>
    <div id='container'>
        <div id='main'>
            <div id='content'>Hello</div>
        </div>
        <div id='footer'> </div>
    </div>
    </body>
</html>

CSS

html, body {
    margin: 0; padding: 0; height: 100%;
}
div#container,div#main {
    background-color: #333;
}
div#container {
    min-height:100%; width:960px; margin:0 auto; position:relative;
}
div#main {
    padding-bottom:90px; margin:0; padding:10px;
        }
div#content {
    width:425px;
}
div#footer {
    position:absolute; bottom:0; width: 100%; height:90px; background-color: #ADF;
}

Upvotes: 0

Sanooj
Sanooj

Reputation: 2637

Try using with absolute position for the footer div

<div id='container'>
            <div id='main'>
                <div id='content'> </div>
            </div>
            <div id='footer'> </div>
        </div>

Make sure that body height is 100%

html,body
{   height:100%;
    padding:0;
    margin:0;
}
div#container {
    width:960px;
    margin:0 auto;
    position:relative;
    height:100%;
}
div#main {
    background-color:black;
    padding-bottom:90px;
}

div#content {
    width:425px;
}

div#footer {
    position:absolute;
    bottom:0;
    width:inherit;
    height:90px;
    width:960px;
}

Upvotes: 0

Beez
Beez

Reputation: 2101

Try making the footer position:fixed.

http://jsfiddle.net/QwJyp/

Update

I'm a little bit closer: http://jsfiddle.net/QwJyp/1/. Perhaps somebody can build off it. If you remove the line with !important defined, it allows the main with height:100% to show up. But there's still a lot of extra padding at the bottom of the div which I can't figure out. I'll continue later when I have more time. Good luck! Hopefully this helps with some direction.

Upvotes: 1

simoncereska
simoncereska

Reputation: 3043

idea is to have #main with padding-bottom x, container min-height: 100%, footer after container and with margin-top -x

Upvotes: 0

Related Questions