javascript - 如何在不重叠的情况下将绝对定位元素推到底部

Question

我有一个容器，其中的文本可以变大，但需要始终确保具有绝对定位元素的子元素应始终贴在容器的底部，并且不应与顶部容器内容重叠。

找了很多例子但是都是用flexbox开发的，需要支持internet explorer 9

这是尝试过的。

.container{
  max-width: 940px;
  margin: 20px auto;
  border: 1px solid red;
}
.table{
  display: table;
  width: 100%;
}
.table-cell{
  display: table-cell;
  position: relative;
  height: 260px;
}
.absolute{
  position: absolute;
  bottom: 0;
}

<div class="container">
  <div class="table">
    <div class="table-cell">
      <div>
        This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content.
        This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content. This content can go very bring, push the absoulte position element to the bottom always without overlapping parent content.
      </div>
      <div class="absolute">
        asdasd
      </div>
    </div>
  </div>
</div>

Answer 1

如评论中所述，您始终可以添加相对于 .absolute 内容高度的 padding-bottom(到您的长文本 div)。由于您标记了 jQuery，我建议动态添加它。使用此值设置您的 padding-bottom:jQuery('.absolute').height()