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()

如何将绝对定位元素推到底部而不重叠

1 个答案: