javascript - 使元素粘在专利的底部

Question

我想将一个元素放置到其父元素底部。我无法设置它的 position: absolute 和 bottom: 0 因为我的父 div 可能会通过缩放或较小的显示来滚动(overview-y)。如果父元素的其他元素不超过寡妇高度，我希望该元素卡在父元素的底部，否则该子元素将最后滚动。

这怎么可能？我应该使用 js 还是通过 css 来完成？

发送

Answer 1

您可以使用 min-height 设置为匹配父级高度的子级内容容器。在页脚的内容元素底部放置足够的填充，并使用 position:absolute 将页脚附加到底部。

请参阅下面的代码段。

$('.toggle').on('click', function() {
  $('.grey').toggleClass('big');
});

.parent {
  border: 1px solid black;
  overflow: auto;
  height: 400px;
}

.content .grey {
  height: 40px;
  margin-bottom: 5px;
  background: grey;
}

.content .grey.big {
  height: 80px;
  margin-bottom: 5px;
  background: grey;
}

.content footer {
  height: 40px;
  background: orange;
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.content {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  padding: 5px 5px 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button class="toggle">Toggle</button>
</p>
<div class="parent">
  <div class="content">
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <footer></footer>
  </div>
</div>