如何令一块div停留在屏幕的底部？

http://www.scriptlover.com/post/234http://www.scriptlover.com/controls/FixedPosition

解决方案 »

  1.   

    例子中是传进去一个坐标 定位的 ，那么对于你来说，想让其居于底部，那么只需要fixedPosition($("posBlock")/*对象*/ ,screen.height /*top*/,5/*left*/);这样就可以了
      

  2.   

    好像直接使用screen.height不行。这是屏幕的高度，不是屏幕中内容的高度。要扣除地址栏等。
      

  3.   

    以下是多种样式，取自己的爱好吧。
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="zh-cn" />
    <title>why?</title>
    <meta name="robots" content="index, follow" />
    <meta name="googlebot" content="index, follow" />
    <style type="text/css" media="screen">
    <!--
    * {margin:0;padding:0;}
    body {margin:0 auto;font:12px/20px tahoma Simsun Arial;color:#fff;background-color:#FFF;text-align:center;}
    .aaa{ width:150px; background:Blue;position:absolute;left:0;top:0; }
    .bbb{ width:150px; background:Blue;position:absolute;right:0;top:0; }
    .ccc{ width:150px; position:absolute; top:100%;left:0; margin-top:-20px;  background:Blue;}
    .ddd{ width:150px; position:absolute; top:100%;right:0; margin-top:-20px;  background:Blue;}
    .aa{ width:50px; position:fixed; background:Black; _position:absolute;_top:expression(eval(document.documentElement.scrollTop));z-index:1000;left:0;top:0; }
    .bb{ width:50px; position:fixed; background:Black; _position:absolute;_top:expression(eval(document.documentElement.scrollTop));z-index:1000;right:0;top:0; }
    .a{ color:#000; }
      -->
    </style>
    </head>
    <body>
    <div class="aaa">AAA</div>
    <div class="bbb">BBB</div>
    <div class="aa">A</div>
    <div class="bb">B</div>
    <div class="a">
    <br />
    <br />
    <br />
    <br />
    <br />
    A层和B层会随滚动条移动永久置顶
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    </div>
    <div class="ccc">CCC</div>
    <div class="ddd">DDD</div>
    </body>
    </html>
      

  4.   

    <div style="position:absolute; bottom:0px; width:100%; background-color:red;">&nbsp;</div>IE7,FF3通过，其他未测。
      

  5.   

    <html>
    <script language="JavaScript">
    <!--
    var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer;
    function resizeDiv()
    {
    divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10);
    divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10);
    docWidth = document.body.clientWidth;
    docHeight = document.body.clientHeight;
    document.getElementById("eMeng").style.top = docHeight + parseInt(document.body.scrollTop,10) - divHeight ;
    document.getElementById("eMeng").style.left = docWidth + parseInt(document.body.scrollLeft,10) - divWidth;
    }window.onload = resizeDiv;
    window.onresize = resizeDiv;
    window.onscroll = resizeDiv;
    -->
    </script>
    <body>
    <div id="eMeng" style="border:1px solid #7788CC;position:absolute;height:150px;width:260px;">
    HelloWorld
    </div>
    HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>HelloWorld<br>
    </body>
    </html>主要是设置top和left属性
      

  6.   

    window.scroll(0,9999999); 这个方法让页面显示在最底部。没有div 一样可以