如何让div粘在父div的底部？

Question

任何人都可以请我帮助我div#bottom坚持父母的底部div,所以当我点击里面的按钮它将允许我从div#list上面显示元素？

我希望避免使用JS,jQuery等,或者至少在布局中:

<div class="wrapper">
   <div id="top">
     <ul>
      ...
      ...
     </ul>
   </div>
   <div class="bottom">
      <div id="button">
         <div id="list">
            <ul>
               <li>elem 1</li>
               <li>elem 2</li>
            </ul>
         </div>
      </div>
   </div>
</div>

Answer 1

.wrapper{position:relative;}
.bottom{position:absolute; bottom:0;}

编辑

感谢@ centr0和@TJ克劳德关键的还是要在这里明白的是,position:relative在.wrapper将"含有"有任何元素position:absolute.这就像宣布边界一样.bottom.如果没有position:relative在.wrapper,.bottom会爆发的那div

Answer 2

我遇到了类似的问题.Val的解决方案很好,但有一个问题 - 内部div会坚持到底部,但由于它的"位置:绝对",它不会影响parrent div的高度.(它超出了页面布局流程).

所以这是我为任何有类似问题的人提供的扩展解决方案:

.wrapper {
    position: relative;
    padding-bottom: 50px;
}

.wrapper .bottom {
    position: absolute;
    bottom: 0px;
    height: 50px;
}

正如您所看到的,我设置了包装器的.bottom ang padding-bottom的高度.缺点是,页脚的高度在两个地方.但我认为这对于产品列表来说是一个很好的解决方案,其中盒子的页脚有固定的高度(比如价格等).

请记住,每次设置"position:absolute;"时,元素将绝对定位于第一个父div,它设置了position属性.或者,最后,反对页面本身.