html - 是否可以让一个绝对位置为 'fixed' 的元素位于其父容器的底部，即使通过 CSS/CSS3 滚动时也是如此？

Question

这个问题的变体已被问过很多次，但我似乎找不到针对这个特定问题的任何解决方案。我有一个 <div>内容具有可变高度的容器元素，具体取决于其中的元素。我希望容器的一部分始终出现在容器 div 的底部，即使用户滚动内容时，他们也应该始终看到容器底部的部分。我不想使用 position: fixed因为那是相对于浏览器大小，而不是 div，当我使用 position: absolute 时我可以将它放在我的容器 div 的底部，但一旦我开始滚动，它就不像一个“固定”元素，而是随内容滚动。

这有可能用纯 CSS 实现吗？

这是我当前的代码:

html, body, .container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.header {
    background-color: red;
    flex: 0 0 auto;
    padding: 1em;
}

.content {
    flex: 1 1 auto;
    overflow-y: auto;
    position: relative;
}

.content > p {
    margin: 1em;
}

.bottom-section {
    background: skyblue;
    bottom: 0;
    height: 50px;
    padding-top: 1em;
    position: absolute;
    width: 100%;
}

.footer {
    background-color: red;
    flex: 0 0 auto;
    padding: .5em;
}

<div class="header">HEADER</div>
    <div class="container">
        <div class="content">  
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
        </div>
    </div>
<div class="footer">FOOTER</div>

谢谢!

Answer 1

实现此目的的最简单方法是将“固定”元素保留在滚动元素之外，并使用基于容器的定位将固定元素覆盖在滚动元素之上。

这里唯一的变化是将 .bottom-section 移到 .content 之外，并在 上设置 position:relative。容器:

html,
body,
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.container {
  position: relative
}

.header {
  background-color: red;
  flex: 0 0 auto;
  padding: 1em;
}

.content {
  flex: 1 1 auto;
  overflow-y: auto;
}

.content>p {
  margin: 1em;
}

.bottom-section {
  background: skyblue;
  bottom: 0;
  height: 50px;
  padding-top: 1em;
  position: absolute;
  width: 100%;
}

.footer {
  background-color: red;
  flex: 0 0 auto;
  padding: .5em;
}

<div class="header">HEADER</div>
<div class="container">
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="bottom-section">STAYS ON BOTTOM OF CONTENT</div>
</div>
<div class="footer">FOOTER</div>