将最大高度设置为位置：粘性

Question

我有两个 div。上面的div使用position: sticky，下面的div应该放在第一个div之后。

但是，当第一个 div 中有很多行时，它会占用所有屏幕，而第二个 div 则看不到。

我试过使用，但是粘性div没有改变它的高度：

max-height: 60%;
overflow-y: auto;

有人知道如何将 max-height 设置为粘滞位置并在第一个 div 中创建滚动条吗？

我的代码如下所示：

.mainContainer {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 0 1rem;
}

.stickyContainer {
    position: sticky;
    top: 0;
    background: lightgreen;
    max-height: 60%;
    overflow-y: auto;
}

.scrollable {
    max-width: 100%;
}

<div class="mainContainer">
      <div class="stickyContainer">
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
        <p>sticky container</p>
      </div>

      <div class="scrollable">
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
        <p>scrollable content</p>
      </div>

Answer 1

你试过vh了吗？

.stickyContainer {
    position: sticky;
    top: 0;
    background: lightgreen;
    max-height:60vh;
    overflow-y: auto;
}

将最大高度设置为位置：粘性

Set max-height to position: sticky

html

javascript

css