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和@ T.J Crowder 这里要理解的关键是position:relative中的.wrapper将“包含”具有position:absolute的任何元素。这就像宣布.bottom的边界一样。如果position:relative中没有.wrapper，则.bottom会突破div

Answer 2

我遇到了类似的问题。 Val的解决方案很好，但有一个问题 - 内部div会坚持到底部，但它不会影响parrent div的高度，这要归功于它的位置：绝对;＆＃34; （它超出了页面布局流程。）

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

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

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

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

请记住，每次设置＆＃34; position：absolute;＆＃34;时，元素将绝对定位于第一个父div，它设置了position属性。或者，最后，反对页面本身。

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

2 个答案: