代码之家 › 专栏 › 技术社区 › J-man

即使通过CSS/CSS3滚动,一个具有绝对位置的元素是否有可能被“固定”到其父容器的底部?

css-position flexbox css3 css html

J-man · 技术社区 · 7 年前

这个问题的一个变种已经被问过很多次了,但我似乎找不到任何解决这个问题的办法。我有一个 <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>

谢谢!

2 回复 | 直到 7 年前

Daniel Beck 7 年前

最简单的方法是将“fixed”元素保持在滚动元素之外,并使用基于容器的定位将固定元素覆盖在滚动元素之上。

这里唯一的变化就是 .bottom-section 外部 .content ,和设置 position:relative 在 .container :

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>

stoneCoder 7 年前

这可能会有帮助,更改下面的代码片段中的这两个类,comment 溢出:隐藏 在里面 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>