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

Question

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

这有可能用纯 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

实现这一点的最简单方法是将 "fixed" 元素保留在滚动元素之外，并使用基于容器的定位将固定元素覆盖在滚动元素之上。

此处唯一的变化是将 .bottom-section 移到 .content 之外，并在 .container 上设置 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>

Answer 2

这可能会有所帮助，更改这两个类，如下面的代码片段，注释 overflow: hidden in html，正文， .容器.

  .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;
  }

                  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: 33px;
                        height: 50px;
                        padding-top: 1em;
                        position: fixed;
                        z-index: 1;
                        width: 100%;
                  }

                  .footer {
                        background-color: red;
                        flex: 0 0 auto;
                        padding: .5em;
                        bottom: 0;
                        position: fixed;
                        width: 100%;
                  }

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

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

Is it possible to have an element with absolute position to be 'fixed' to the bottom of it's parent container, even when scrolling via CSS/CSS3?

html

css

css-position

flexbox