Question

无论您如何滚动，div都应始终位于网页的底部。有没有使用jQuery的解决方案？

修改：

应该在IE6中运行。

Answer 1

不需要javascript。 CSS可以做到这一点......

#footer { 
  position: fixed; 
  width: 100%; 
  height: 50px; 
  left: 0; 
  bottom: 0 
}

Answer 2

position：fixed是所有浏览器的解决方案，但ie6

有很多解决方案可以使位置固定在ie6

上

但是一旦你这样做，你将在其他浏览器中放弃一些其他功能（位置：相对和绝对松散），或者你需要css表达式，它们会减慢浏览器的速度

http://www.cssplay.co.uk/layouts/fixed.html（css松散的相对和绝对） http://tagsoup.com/cookbook/css/fixed/bottom/ http://limpid.nl/lab/css/fixed/footer

严重停止为ie6开发！：）

Answer 3

<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>

Answer 4

要使用jQuery设置合适的样式，您可以这样做：

$('#footer').css({ 
  position: "fixed", 
  width: "100%",
  height: "50px", 
  left: 0, 
  bottom: 0 
});

Answer 5

<style type="text/css">
#bottom {
  position: fixed;
  bottom: 0;
}
</style>

Answer 6

你可以用纯css实现这一点。这是摘录（摘自http://groups.google.com/group/jquery-en/msg/3b877c156facb54d）：

#footer { 
        position: absolute; 
        height: 50px; 
        width: 300px; 
        bottom: 0px; 
        left: 10px; 
}

如何实现IE6的底部位置？IE5仍然存在同样的问题，比如所有早期版本？

6 个答案: