Html 如何让div粘在父div的底部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5106181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div stick to the bottom of parent div?
提问by m1k3y3
Could anyone please help me making div#bottomstick to the bottom of the parent div, so when I click on the button inside it will allow me to show elements from div#listabove itself?
任何人都可以帮我div#bottom粘在父级的底部div，所以当我点击里面的按钮时，它会允许我从div#list上面显示元素吗？
Preferably I would want to avoid JS, jQuery, etc. or at least in the layout:
我最好避免使用 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>
回答by Val
.wrapper{position:relative;}
.bottom{position:absolute; bottom:0;}
Edited
已编辑
Thanks to @centr0 and @T.J Crowder
the key thing to understand here is that position:relativein .wrapperwill "contain" any element that has position:absolute. It's like declaring boundaries for .bottom. Without position:relativein .wrapper, .bottomwould break out of that div
感谢@centr0 和@TJ Crowder，这里要理解的关键是position:relativein.wrapper将“包含”任何具有position:absolute. 这就像为 声明边界.bottom。没有position:relativein .wrapper，.bottom就会摆脱那个div
回答by Martin Brabec
I run to a similiar problem. The solution from Val is good, but has one issue - the inner div will stick to bottom, but it will not affect the height of parrent div, thanks to its "position: absolute;" (it is out of the page layout flow).
我遇到了类似的问题。Val 的解决方案很好，但有一个问题 - 内部 div 会粘在底部，但不会影响父 div 的高度，这要归功于它的“位置：绝对；” （它超出了页面布局流程）。
So here is my expanded solution for anyone having similiar problem:
所以这是我为有类似问题的人提供的扩展解决方案：
.wrapper {
position: relative;
padding-bottom: 50px;
}
.wrapper .bottom {
position: absolute;
bottom: 0px;
height: 50px;
}
As you can see, I set height of the .bottom ang padding-bottom of the wrapper. Disadvantage is, that the height of the footer is on two places. But I think it is a good solution for example for product list, where there is fixed height in footer of the box (like for price etc).
如您所见，我设置了包装器的 .bottom ang padding-bottom 的高度。缺点是，页脚的高度在两个地方。但我认为这是一个很好的解决方案，例如产品列表，其中框的页脚有固定高度（例如价格等）。
Remember, that everytime you set "position: absolute;", the element will be absolutely positioned against first parent div, which has set position attribute. Or, eventualy, against the page itself.
请记住，每次设置“position: absolute;”时，元素将绝对定位在第一个父 div 上，该父 div 具有设置的 position 属性。或者，最终，针对页面本身。
