CSS位置:粘性和溢出

Question

无法找到解决方案.基本上,我想要实现的是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>

小提琴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>

小提琴2

任何解释/解决方案赞赏.

确保在测试时使用Firefox

Answer 1

重要的是要理解sticky元素首先被视为relative元素然后是fixed元素(参见MDN).因此,您必须首先将其视为相对元素.如果给相对元素赋予100%的高度,那么除非其父元素具有已定义的高度,否则不会发生任何事情.

如果您希望粘性元素也具有滚动条,则必须为其指定有意义的高度.我建议使用视口高度:

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

对于记录 - fixed在滚动期间元素变为"FF"或Safari中,"粘性"似乎没有按预期工作.我并不关心自己 - 只关注溢出问题.