实现子列撑满父容器并在溢出时显示独立滚动条（含固定布局）

需求说明 #

页面中的3个列需撑满整个视图高度：

• 列内容未占满视图高度时，无滚动条，但列的左右边框仍撑满视图高度；
• 列内容超出视图高度时，仅该列显示独立滚动条；
• 需兼容现有网站结构（固定header、sidebar、footer），同时支持全局滚动和列独立滚动两种页面类型。

初始代码问题（简化版） #

以下代码无法实现列独立滚动，仅显示窗口主滚动条：

CSS #

.parent {
  display: flex;
  justify-content: center;
  color: white;
  background-color: darkred;
  margin: 0;
  min-width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
}

.child-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: darkblue;
  width: 200px;
  margin-left: 20px;
  margin-right: 20px;
  border: 1px solid black;
  overflow-y: auto;
}

.gran-child-item {
  background-color: darkgoldenrod;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}

HTML #

<body class="parent">
  <div class="child-column">
    <h4> Left </h4>
    <div class="gran-child-item"></div>
    <div class="gran-child-item"></div>
  </div>

  <div class="child-column">
    <h4> Center </h4>
    <div class="gran-child-item"></div>
    <div class="gran-child-item"></div>
    <div class="gran-child-item"></div>
  </div>

  <div class="child-column">
    <h4> Right </h4>
    <div class="gran-child-item"></div>
  </div>
</body>

更新后完整结构问题（带header/sidebar/footer） #

现有网站结构包含固定顶部header、侧边sidebar和底部footer，此前通过flex-grow:1实现footer固定，但应用列滚动方案后失效：

CSS #

* {
    box-sizing: border-box;
}

html, body {
    display: flex;
    flex-grow: 1;
    color: white;
    background-color: darkred;
    margin: 0;
    height: 100vh;
}

.header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: darkgreen;
}

.sidebar {
    position: fixed;
    width: 100px;
    height: calc(100vh - 50px);
    left: 0;
    top: 50px;
    background-color: darkcyan;
}

.footer {
    height: 50px;
    background-color: darkmagenta;
}

.page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: 100px;
    margin-top: 50px;
}

.page-content {
    display: flex;
    flex-grow: 1;
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: darkblue;
    width: 200px;
    margin-left: 20px;
    margin-right: 20px;
    height: 100%;
    border: 1px solid black;
    overflow-y: auto;
}

.item {
    flex-shrink: 0;
    background-color: darkgoldenrod;
    width: 100px;
    height: 100px;
    border: 1px solid black;
}

HTML #

<body>
    <div class="header"> header </div>
    <div class="sidebar"> sidebar </div>
    <div class="page-container">
        <div class="page-content">
            <div class="column">
                <h4> Left </h4>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="column">
                <h4> Center </h4>
                <div class="item"></div>
                <div class="item"></div>
                <div class="item"></div>
            </div>
            <div class="column">
                <h4> Right </h4>
                <div class="item"></div>
            </div>
        </div>
        <div class="footer"> footer </div>
    </div>
</body>

解决方案 #

核心是确保列的高度被严格限制在可用视图空间内，同时让列的内容区独立滚动，边框保持满高。修改要点如下：

1. 修正根节点布局：让body作为垂直flex容器，限制高度为100vh并隐藏溢出，避免全局滚动干扰
2. 调整页面容器高度：计算page-container的可用高度，扣除header和footer的高度
3. 优化列的flex属性：让列在page-content中占满可用空间，同时将内容区与边框分离，保证边框满高，内容区独立滚动

修改后的完整CSS #

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden; /* 禁止全局滚动 */
    color: white;
    background-color: darkred;
}

body {
    display: flex;
}

.header {
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: darkgreen;
    z-index: 100;
}

.sidebar {
    position: fixed;
    width: 100px;
    height: calc(100vh - 50px);
    left: 0;
    top: 50px;
    background-color: darkcyan;
    z-index: 90;
}

.footer {
    height: 50px;
    background-color: darkmagenta;
    flex-shrink: 0; /* 固定footer高度，不被压缩 */
}

.page-container {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-left: 100px;
    margin-top: 50px;
    height: calc(100vh - 50px); /* 扣除header高度 */
}

.page-content {
    display: flex;
    flex-grow: 1;
    overflow: hidden; /* 隐藏容器溢出，避免影响列 */
}

.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: darkblue;
    width: 200px;
    margin: 0 20px;
    border: 1px solid black;
    flex-grow: 0; /* 保持列宽度固定 */
    flex-shrink: 0;
    overflow: hidden; /* 隐藏列的溢出，让内部内容区滚动 */
}

.column-content {
    flex-grow: 1;
    width: 100%;
    overflow-y: auto; /* 内容溢出时显示滚动条 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}

.item {
    flex-shrink: 0;
    background-color: darkgoldenrod;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px 0;
}

修改后的HTML #

<body>
    <div class="header"> header </div>
    <div class="sidebar"> sidebar </div>
    <div class="page-container">
        <div class="page-content">
            <div class="column">
                <div class="column-content">
                    <h4> Left </h4>
                    <div class="item"></div>
                    <div class="item"></div>
                    <!-- 可添加更多item测试滚动 -->
                </div>
            </div>
            <div class="column">
                <div class="column-content">
                    <h4> Center </h4>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                    <div class="item"></div>
                </div>
            </div>
            <div class="column">
                <div class="column-content">
                    <h4> Right </h4>
                    <div class="item"></div>
                </div>
            </div>
        </div>
        <div class="footer"> footer </div>
    </div>
</body>

兼容全局滚动页面的方案 #

如果需要在其他页面恢复全局滚动，只需给对应页面的body添加类（如global-scroll），并添加以下CSS：

body.global-scroll {
    overflow-y: auto;
}

body.global-scroll .page-container {
    height: auto;
    min-height: calc(100vh - 50px);
}

body.global-scroll .page-content {
    overflow: visible;
}

body.global-scroll .column-content {
    overflow-y: visible;
}

内容的提问来源于stack exchange，提问作者Stanton