problem implementing css sticky footer with liquid/fluid layout
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 shou开发者_开发问答ld. 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;
}
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.
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.
加载中,请稍侯......
精彩评论