如何为position:sticky元素设置max-height实现内部滚动

AI 小北

2026-9-3

问题原因

百分比形式的max-height生效有必要前提：父元素必须存在明确的、不依赖内容计算的固定高度。
你的代码中.mainContainer为纵向flex布局，默认高度完全由内部子元素撑开，无确定高度值，因此.stickyContainer上设置的max-height: 60%没有计算参照，规则完全不生效。当sticky容器内内容行数过多时，就会撑满整个屏幕，遮挡下方的普通内容区。

修复方案

根据实际布局场景二选一即可：

方案1：给父容器设置明确高度，适用于页面级全高布局场景
给.mainContainer添加视口高度声明，为子元素的百分比高度提供计算基准。如果需要上下两个区域各自独立滚动，可以给下方内容区补充flex属性，完整CSS如下：

.mainContainer {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 0 1rem;
    /* 新增：设置容器高度为视口全高，作为百分比高度的计算基准 */
    height: 100vh;
}

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

.scrollable {
    max-width: 100%;
    /* 可选：让下方内容区占满剩余高度，内容超出时独立滚动 */
    flex: 1;
    overflow-y: auto;
}

方案2：sticky元素直接使用视口单位，无需依赖父元素高度
如果不想修改父容器属性，直接把max-height的百分比单位替换为视口高度单位vh即可，不需要父元素有确定高度就能直接生效，写法更灵活：
```
.stickyContainer {
    position: sticky;
    top: 0;
    background: lightgreen;
    /* 直接设置最大高度为视口高度的60%，无需父元素高度基准 */
    max-height: 60vh;
    overflow-y: auto;
}
```