0

对将 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>
4

2 回答 2

1

您需要将另一个新的 div 与 warpper 的宽度和高度相同并将 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>
于 2012-05-12T18:03:41.093 回答
0

检查这个。

制作position: fixedof.bot并添加了topand left。

于 2012-05-12T18:12:23.163 回答