CSS 位置：粘性和溢出答案

【问题标题】：CSS position: sticky and overflowCSS 位置：粘性和溢出
【发布时间】：2016-10-11 16:04:53
【问题描述】：

无法找到解决方案。基本上，我想要实现的是，如果内容多于浏览器高度，则带有 position: sticky 的元素会出现滚动条。

我不想使用position: fixed，因为它会增加颈部疼痛。

这是我期望它如何工作的示例：

.placeholder {
  height: 200vh;
  width: 50%;
  float: right;
}

.child {
  position: fixed;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
}

<div class="parent">
  <div class="placeholder"></div>
  <div class="child">
    some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br /> some long text
    <br />

  </div>
</div>

Fiddle 1

这是position: sticky 的示例，其中overflow 不执行任何操作：

.placeholder {
  height: 200vh;
  width: 50%;
  float: right;
}

.child {
  position: sticky;
  top: 0;
  bottom: 0;
  height: 100%;
  overflow-y: auto;
}

<div class="parent">
  <div class="placeholder"></div>
  <div class="child">
    some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  some long text <br />
  
  </div>  
</div>

Fiddle 2

感谢任何解释/解决方案。

确保在测试时使用 Firefox

【问题讨论】：

这是你的问题caniuse.com/#search=position%3A%20sticky
您在滚动容器中设置了 top:0 。该容器内的 0 坐标滚动 :) 把它带到外面和浮动元素：jsfiddle.net/ab5u54hh/7 关于粘性的事情是它确实在流中交互并且可以在另一个容器到位时推开例如：codepen.io/gcyrillus/pen/oxNLBO
粘性不是绝对的，也不是固定的，它在流动中可以粘在坐标上，直到它有空间留在那里......，这是棘手的部分......它甚至可以浮动。 ......所以难怪为什么一开始处理它是一件容易的事;）
@AdamBuchananSmith 不相关； OP 正在使用问题中所述的 Firefox，其中支持 position: sticky;。

标签： css css-position

【解决方案1】：

了解sticky 元素首先被视为relative 元素和然后为fixed 元素（参见MDN）是很重要的。因此，您必须首先将其视为相对元素。如果你给一个相对元素一个 100% 的高度，那么除非它的父元素有一个定义的高度，否则什么都不会发生。

如果你想让你的粘性元素也有一个滚动条，你必须给它一个有意义的高度。我建议使用视口高度：

.child {
  position: sticky;
  top: 0;
  bottom: 0;
  height: 50vh;
  overflow-y: auto;
}

记录在案 - 就滚动期间元素变为 fixed 而言，“粘性”在 FF 或 Safari 中似乎没有按预期工作。我不关心这个 - 只关注溢出问题。

【讨论】：

您的回答对我有帮助。在我的例子中，我使用了max-height: calc(100vh - 80px)，因为我把它粘在距离顶部 80px 的元素上。它还允许我滚动右侧较长的内容，并且仍然保持左侧列表的粘性。
对我来说 position stikcy 并没有与 overflow:auto 结合使用