To try to explain my problem, I did the following code:
http://jsfiddle.net/Ridermansb/REYZ6/
The question is.
The div "Footer" should always be glued to the bottom of the screen (bottom: 0).
BUT if the div "content" grow to the point of creating a scroll bar, the div "footer" should be just below the div "content"
One should never overlap each other!
As you can see in the example, if the screen is too small the "#footer" will override "#content". This can not happen!
Thanks!
From what I understand per your fiddle, what you want to do is impossible with just css. That said, I've come up with a single line in jquery you can use to do what I think you want:
$('#spacer').height($("#footer > div").height());
Non jquery code:
document.getElementById('spacer').style.height = document.getElementById('footer-inner').offsetHeight + "px";
Both snippets however require a slight change to your HTML structure; they both add in a spacer div that pushes up the content out from under the footer div. The second snippet however requires you give your footer's inner div an id as well.
.container {
position: relative;
}
.container .glued_bottom {
position: absolute;
bottom: 0;
height: 20px;
}
few ways to tackle the footer layouts
using percentage heights can work in some cases
html, body { height:100%;}
#header {height:10%; }
#content { height:80%; }
#footer { height:10%;}
Appreciate it might not fit for the content of your site, but worth a look as css only option.
Another is the use of background css elements , color your page to be your footer color ( lets say green )
and set the header and content elements to be, say, white for eg purposes
body { background-color:green; }
#header { background-color:white; }
#content { background-color:white; }
... Couple of non Javascript ideas to play with possibly
Yes, fixed or abs positioning will cause the overlaps without adding some Javascript to keep watch and make repositioning alterations.
Hope helps a little
Via this sticky footer tutorial. The following code should be all you need to create a sticky footer.
* {
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/
*/
In your case, you were missing pretty much all of the above css except for the 100% height on the html and body. I have updated your jsfiddle.
position: fixed;Use CSS's position:fixed; on the element with bottom and left set. e.g.:
#footer {
position: fixed;
bottom: 0px;
left: 0px;
}
