如何使div粘贴到父div的底部？

任何人都可以请帮助我使div#bottom贴到父div的底部，所以当我点击里面的button将允许我显示上面的div#list元素本身？

最好我想避免JS，jQuery等或至less在布局：

 <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 Crowder这里要理解的关键是position:relative .wrapper中的.wrapper将“包含”任何具有position:absolute元素。 这就像为.bottom声明边界.bottom 。 没有position:relative在.wrapper position:relative ， .bottom会突破该div

Answer 2

我跑到类似的问题。 从瓦尔的解决scheme是好的，但有一个问题 – 内部股利将坚持底部，但它不会影响parrent div的高度，由于其“位置：绝对的”。 （它不在页面布局stream程中）。

所以这里是我的扩展解决scheme，任何人都有类似的问题：

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

正如你所看到的，我设置了封装底部的底部高度。 缺点是，页脚的高度在两个地方。 但我认为这是一个很好的解决scheme，例如产品列表，其中框的页脚有固定的高度（如价格等）。

请记住，每次设置“position：absolute”时，该元素都将被绝对定位为具有设置位置属性的第一个父div。 或者，事实上，对页面本身。