html-如何使div坚持父div的底部?

谁能帮我把div#bottom粘贴到父级div的底部,所以当我单击内部的按钮时,它可以让我在其上方显示2940997740052087887810中的元素吗?

最好是我想避免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>
m1k3y3 asked 2020-06-27T05:13:55Z
2个解决方案
112 votes
.wrapper{position:relative;}
.bottom{position:absolute; bottom:0;}

已编辑

感谢@ centr0和@ T.J Crowder这里要了解的关键是.wrapper中的position:relative将“包含”具有position:absolute的任何元素。这就像为.bottom声明边界一样。如果在.wrapper中没有position:relative,则.bottom会突破2940998052846502902916

Val answered 2020-06-27T05:14:13Z
9 votes

我遇到一个类似的问题。 Val的解决方案是好的,但是有一个问题-内部div会固定在底部,但是由于其“位置:绝对”,因此不会影响parrent div的高度。 (超出页面布局流程)。

因此,这是我针对有类似问题的任何人的扩展解决方案:

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

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

如您所见,我设置了包装器的.bottom和padding-bottom的高度。 缺点是页脚的高度在两个地方。 但是我认为这是一个很好的解决方案,例如对于产品清单,其中包装盒的页脚中的高度固定(例如价格等)。

请记住,每次您设置“ position:absolute;”时,该元素将相对于具有设置位置属性的第一个父div绝对定位。 或者,最终,针对页面本身。

Martin Brabec answered 2020-06-27T05:14:47Z
translate from https://stackoverflow.com:/questions/5106181/how-to-make-div-stick-to-the-bottom-of-parent-div