Question

将div粘贴到父div底部的常见问题略有不同。在这种情况下，我希望卡住的div即使在它的父级滚动时仍然卡住，并且位于滚动下方的文本之上。有什么诀窍？ jsfiddle在这里：http://jsfiddle.net/forgetcolor/vYjMv/1/。代码重复如下：

 <!doctype html>
<html>
  <head>
    <style type="text/css">
      #wrapper {
        width:300px;
        height:300px;
        background-color:#eee;
        position:relative;
        overflow:auto;
      }

      .bot {
        border:1px solid #ddd;
        display:inline;
        position:absolute;
        bottom:0;
        right:0;
        color:blue;
      }

    </style>
    <title>tst</title>
  </head>
  <body>
    <div id="wrapper">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est.
      </p>
      <span class="bot">bottom</span>
    </div>
  </body>
</html>

Answer 1

你需要把另一个新div放到相同的宽度上;包装高度和卡住div：

检查一下：

<!doctype html>
<html>
  <head>
    <style type="text/css">
       #fake_wrapper{
        width:300px;
        height:300px;
        position:relative;
        overflow:none;
      }

      #wrapper {
        width:300px;
        height:300px;
        background-color:#eee;
        overflow:auto;
      }

      .bot {
        border:1px solid #ddd;
        display:block;
        position:absolute;
        bottom:0px;
        right:15px;
        color:blue;
      }

    </style>
    <title>tst</title>
  </head>
  <body>
    <div id="fake_wrapper">
    <div id="wrapper">
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed tempor nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie tortor non nisi accumsan placerat. Morbi elit risus, venenatis et sodales congue, tristique vel ligula. Maecenas convallis arcu turpis. Praesent nibh leo, blandit ut posuere et, aliquet at sapien. Ut placerat, libero id faucibus pellentesque, leo nulla consectetur ligula, quis malesuada sapien nulla id diam. Nullam turpis nisl, malesuada non gravida eu, eleifend et quam. Proin sit amet elit euismod odio tincidunt tempor. Sed eleifend tincidunt blandit. Cras eget sapien odio, a sodales dui. Pellentesque tincidunt varius sagittis. Nullam nisl est, volutpat sed fringilla at, faucibus id mi. Phasellus vel lacus nibh, eget consectetur nulla. Quisque vel elementum nibh. Etiam vitae lectus erat, eu euismod est.
      </p>

    </div>
    <div class="bot">bottom fixed</div>
    </div>

  </body>
</html>

Answer 2

Check this one

制作position: fixed .bot并添加了top和left。

如何让div粘到溢出的底部：自动父div？

2 个答案: