problem implementing css sticky footer with liquid/fluid layout

Question

I am trying to implement the CSS Sticky Footer method as shown at cssstickyfooter.com. (I have also tried Ryan Fait's solution but to no avail).

I have followed everything to a t, or least I think I have. I have a container div (they call it wrap), a logo bar (they call it a header) and a page div (they call it main) then I have my footer.

So here is the problem, if I have the overflow:auto on then I get a really short div and a scroll bar (yucky). But if I comment it out all my content shows but the page still believes that the div is the same size as if the overflow:auto was not commented out.

It otherwise works just as it should. The footer stays at the bottom and when resizing, it stops at the short page/main div. Is there any way to get it to the bottom of my content? I should mention that I can't use fixed height for my page/main div because I need it to resize based on the size of the div's it contains (whichever one is visible at the time).

It may or may not be the footer causing the issue, either way I could use some help figuring this out.

HTML:

<body>
<div id="container">
    <div id="logo"> 

        <div id="home-flower"></div><!-- end home-flower -->
        <div id="about-flower"></div><!-- end about-flower -->
        <div id="proof-flower"></div><!-- end proof-flower -->
        <div id="contact-flower" ></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div id="page">
        <div id="spacer"><br/></div><!-- end spacer -->
        <div id="home">home</div><!-- end home -->
        <div id="about">about</div><!-- end about -->
        <div id="proof">proof of concept</div><!-- end proof -->
        <div id="contact">contact</div><!-- end contact --> 
    </div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>

CSS:

* {
    margin:0px auto !important;
}

html, body {
    height:100%;    
}

#container {
    width:800px;
    background-color:#F0F;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#page{
    width:100%;
    min-height:100%;
    position:relative;
    background-color:#F00;
    padding-bottom:75px;
    /*overflow:auto;*/
}

#logo{
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);
}

#home{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
}

#about{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#proof{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#contact{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#footer {
    position:relative;
    margin-top:-75px;
    width:800px;
    height:75px;
    background-color:#C0F;
    clear:both;
}

#spacer {
    position:relative;
    line-height:20px;
}

http://stackoverflow.com/questions/20085137/my-footer-floats/20114486#20114486 — Craig Tullis, Mar 13 '14 at 16:04

score 0 · Answer 1 · answered Aug 02 '11 at 11:23

0

How about using

<div id="footer">
  This is footer text
</div><!-- end footer -->

and css as

#footer{ position:fixed; bottom:0px; }

The footer sticks to the bottom of the page.

Is this what you are looking for.

answered Aug 02 '11 at 11:23

prasvin

3,009
23
28

tried that before. however that makes it stay above all the content. what i am looking for is to have it stay at the bottom of the window if the content doesn't extend past the viewing area or the end of the content if it is longer than the viewing area. thanks for the answer though – Joe Aug 02 '11 at 11:31

score 0 · Accepted Answer · answered Aug 03 '11 at 00:53

It looks like I needed to change the position of the #home, #about, #proof, and #contact divs to relative instead of absolute like I had them. However, once I do that they are no longer stacked on top of each other. Any ideas on how to make relatively positioned divs have the same (x,y) position so that they are right on top of each other? I have the top and left set to 0px for each div but theyare just layering themselves instead of stacking...if that makes any sense.

problem implementing css sticky footer with liquid/fluid layout

2 Answers2