你可能不想要绝对定位，因为它破坏了回流:在某些情况下，更好的解决方案是使祖父元素display:table;父元素显示:table-cell;vertical-align:bottom;。完成此操作后，您应该能够给予子元素display:inline-block;它们会自动神奇地流向父节点的底部。

<div style="position: relative; 
                width: 200px; 
                height: 150px; 
                border: 1px solid black;">

  <div style="position: absolute; 
                    bottom: 0; 
                    width: 100%; 
                    height: 50px; 
                    border: 1px solid red;">
  </div>
</div>

灵活的方式。

.parent { 显示:flex; flex-direction:列; justify-content:之间的空间; ｝ /*不需要，只是为了可视化*/ .parent { 身高:500 px; 边框:1px纯黑色; ｝ .parent div { 边框:1px纯红色; ｝ < div class = "父" > <div>图片，文本，按钮哦天哪!< / div > < div > < / div底部> < / div >

编辑:

来源- Flexbox指南

浏览器支持flexbox - Caniuse

使外部div位置="相对"和内部div位置="绝对"，并设置它的底部="0"。

你可能不想要绝对定位，因为它破坏了回流:在某些情况下，更好的解决方案是使祖父元素display:table;父元素显示:table-cell;vertical-align:bottom;。完成此操作后，您应该能够给予子元素display:inline-block;它们会自动神奇地流向父节点的底部。

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>

如果你知道父母的身高，下面是避免绝对divs和table的方法:

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS:

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JsFiddle:

例子