Css 如何使div粘到溢出的底部：自动父div？_Css_Css Position

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

css

Css 如何使div粘到溢出的底部：自动父div？,css,css-position,Css,Css Position,在将div粘贴到父div底部这一常见问题上有一个小小的改变。在本例中，我希望被粘贴的div即使在父div被滚动时也保持被粘贴状态，并且位于滚动到下面的文本的顶部。有什么诀窍？这里的jsfiddle:。代码重复如下： <!doctype html> <html> <head> <style type="text/css"> #wrapper { width:300px; height:300p

在将div粘贴到父div底部这一常见问题上有一个小小的改变。在本例中，我希望被粘贴的div即使在父div被滚动时也保持被粘贴状态，并且位于滚动到下面的文本的顶部。有什么诀窍？这里的jsfiddle:。代码重复如下：

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


#包装纸{
宽度：300px；
高度：300px；
背景色：#eee；
位置：相对位置；
溢出：自动；
}
.机器人{
边框：1px实心#ddd；
显示：内联；
位置：绝对位置；
底部：0；
右：0；
颜色：蓝色；
}
tst

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是暂时的。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。Donec molestie tortor non nisi accumsan placerat。Morbi Elite risus、venenatis和sodales congue、tristique vel ligula。马塞纳斯·康瓦利斯·阿库·图皮斯。尼布·利奥、布朗迪特·乌特·波苏尔和阿利奎特·萨皮恩。放鼠，自由女神佩伦茨克，利奥·努拉·康塞特图尔·利古拉，智慧女神努拉·迪姆。Nullam turpis nisl，malesuada非孕妇欧盟，eleifend和quam。这是一位杰出的临时总统。塞德·埃利芬德·汀西德·布兰迪特。克拉斯·埃吉特·萨皮恩·奥迪奥，苏打啤酒酒后驾车。矢状大斑金龟。我的名字叫努拉姆·尼斯，我的名字叫弗林利亚，我的名字叫福西布斯。相位为零，相位为零。这是一种新的元素。埃蒂亚姆·维塔莱克图斯·埃拉特（Etiam Vita lectus erat），欧盟成员国。

底部

您需要将另一个新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>


#假包装{
宽度：300px；
高度：300px；
位置：相对位置；
溢出：无；
}
#包装纸{
宽度：300px；
高度：300px；
背景色：#eee；
溢出：自动；
}
.机器人{
边框：1px实心#ddd；
显示：块；
位置：绝对位置；
底部：0px；
右：15px；
颜色：蓝色；
}
tst

Lorem ipsum dolor sit amet，是一位杰出的献身者。这是暂时的。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。Donec molestie tortor non nisi accumsan placerat。Morbi Elite risus、venenatis和sodales congue、tristique vel ligula。马塞纳斯·康瓦利斯·阿库·图皮斯。尼布·利奥、布朗迪特·乌特·波苏尔和阿利奎特·萨皮恩。放鼠，自由女神佩伦茨克，利奥·努拉·康塞特图尔·利古拉，智慧女神努拉·迪姆。Nullam turpis nisl，malesuada非孕妇欧盟，eleifend和quam。这是一位杰出的临时总统。塞德·埃利芬德·汀西德·布兰迪特。克拉斯·埃吉特·萨皮恩·奥迪奥，苏打啤酒酒后驾车。矢状大斑金龟。我的名字叫努拉姆·尼斯，我的名字叫弗林利亚，我的名字叫福西布斯。相位为零，相位为零。这是一种新的元素。埃蒂亚姆·维塔莱克图斯·埃拉特（Etiam Vita lectus erat），欧盟成员国。

底部固定

使

位置：固定.bot的，并添加顶部
和左侧