No matter how you scroll, the div should always be at the bottom of the web page. Is there a solution using jQuery?
EDIT:
Should make it work in IE6.
views:
495answers:
7
A:
You can achieve that with pure css. Here's an excerpt (taken from http://groups.google.com/group/jquery-en/msg/3b877c156facb54d):
#footer {
position: absolute;
height: 50px;
width: 300px;
bottom: 0px;
left: 10px;
}
Miguel Ping
2009-09-06 09:35:38
He said "No matter how you scroll". So, I think 'position' should be 'fix'.
Ei Maung
2009-09-06 09:38:31
-1, "absolute" won't do it
orip
2009-09-06 09:45:08
+3
A:
No need of javascript. CSS could do that...
#footer {
position: fixed;
width: 100%;
height: 50px;
left: 0;
bottom: 0
}
Ei Maung
2009-09-06 09:37:50
A:
To set the appropriate style with jQuery you can do:
$('#footer').css({
position: "fixed",
width: "100%",
height: "50px",
left: 0,
bottom: 0
});
Kamil Szot
2009-09-06 09:40:03
I fixed missing quotes. Apart from this, I don't know why I have been downvoted. Man asked how he can do it with jQuery. Maybe he wants to do it on some event? Pure css solutions would be useless in that case.
Kamil Szot
2009-09-06 10:50:43
A:
<style type="text/css">
#bottom {
position: fixed;
bottom: 0;
}
</style>
orip
2009-09-06 09:46:09
+2
A:
position:fixed is the solution for all browsers but ie6
There's plenty of solutions to make position fixed to work with ie6
But all time you'll do it you'll loose some other functionnality in other browsers (position:relative and absolute loosed), or you'll need css expressions and they will slow down the browser
http://www.cssplay.co.uk/layouts/fixed.html (css loose of relative and absolute) http://tagsoup.com/cookbook/css/fixed/bottom/ http://limpid.nl/lab/css/fixed/footer
Seriously stop developing for ie6 ! :)
vvo
2009-09-06 11:39:29
Not having to develop for IE6 is often just a dream. Since often in professional environments your clients require backward compatibility till IE6 and that's a nightmare.
Juri
2009-09-06 11:52:02
All companies staying behind ie6 are just laizyyy, switching from ie6 to ie7 doesn't require much change in code !Javascript and css in ie6 have less functions, habilities than in ie7, there's no real reason to stay with ie6 but fear and not controlling how your apps really works !Modifying 100 lines of css/javascript is harder than not touching anything, i understand :)BUT i also understed that when you're dealing with clients, you can't argue like that but i'll definitely say no to someone asking me to develop a new site under ie6.
vvo
2009-09-06 11:56:41
NOPE !Is this solution acceptable ? :) You have all the keys to change your code
vvo
2009-09-07 15:16:28
+1
A:
<html>
<head>
<style type="text/css">
#theFooter {
position:absolute;
height:100px;
width:100px;
background-color:blue;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$("document").ready(function () {
function recalculate(event) {
var footer = $("#theFooter");
var theWindow = $(window);
var elementHeight = footer.height();
var windowHeight = theWindow.height();
var scrollTop = theWindow.scrollTop();
footer.css("top", windowHeight - elementHeight + scrollTop);
}
$(window).bind("resize scroll", recalculate);
recalculate();
});
</script>
</head>
<body>
<div id="theFooter">
Some Content.
</div>
</body>
</html>
Georg
2009-09-06 12:19:18
Since only IE6 don't obey position:fixed,I think you'd better make it only apply to IE6,right?
Shore
2009-09-06 12:35:59
How to make your code only apply to IE6?BTW,will IE5 also have this problem?
Shore
2009-09-06 13:05:51
Use conditional comments: http://www.quirksmode.org/css/condcom.htmlIE5 has probably the same error but isn't supported by jQuery anyway.
Georg
2009-09-06 13:26:30