并排双Div实现100%高度及蓝色Div平滑滚动问题求助

嘿，我来帮你搞定这个红色列无法保持100%高度的问题！其实这个问题的核心原因很常见——你的父容器没有明确设置高度基准，或者用了传统布局（比如float）导致高度塌陷，让子元素的height: 100%失去了参照。

我给你两种可靠的现代布局方案，都能完美解决这个问题，同时满足“两列独立滚动、蓝色列平滑滚动”的需求：

方案一：Flexbox布局（推荐） #

Flexbox是处理这种等高布局最顺手的工具，代码简洁且兼容性好。

基础HTML结构（适配你的场景） #

<div class="column-container">
  <div class="column red-column">
    <!-- 红色列的内容，多到需要滚动 -->
  </div>
  <div class="column blue-column">
    <!-- 蓝色列的内容，多到需要滚动 -->
  </div>
</div>

CSS修改代码 #

/* 第一步：让根元素和body占满整个视口高度，给容器提供高度基准 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 第二步：用Flexbox设置容器 */
.column-container {
  display: flex; /* 启用Flex布局 */
  height: 100%; /* 容器占满父元素（body）的高度 */
}

/* 第三步：设置列的样式 */
.column {
  flex: 1; /* 两列平分容器宽度，要固定宽度可以改成flex: 0 0 50% */
  overflow-y: auto; /* 内容超出时自动显示滚动条，实现独立滚动 */
}

.red-column {
  background-color: #ff4444;
}

.blue-column {
  background-color: #4444ff;
  scroll-behavior: smooth; /* 给蓝色列加上平滑滚动 */
}

方案二：Grid布局（更直观的分栏） #

如果你更喜欢Grid的分栏逻辑，也可以用这个方案，效果一样好：

CSS修改代码 #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.column-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 直接定义两列平分宽度 */
  height: 100%;
}

.column {
  overflow-y: auto;
}

.blue-column {
  scroll-behavior: smooth;
}

为什么这样改能解决问题？ #

1. 高度基准问题：给html和body设置height: 100%，让整个页面的高度以视口为基准，容器再继承这个高度，这样子列的高度就有了明确的参照（其实Flex/Grid会自动让子元素拉伸到容器高度，甚至不用额外写height: 100%）。
2. 等高布局：Flexbox和Grid默认都会让子元素在垂直方向上占满容器高度，彻底避免了传统float布局的高度塌陷问题。
3. 独立滚动：overflow-y: auto保证每列内容超出时，只在自身范围内滚动，不会影响另一列。

你可以把这些代码替换到你的项目里，红色列的高度就能完美和蓝色列保持一致，同时所有功能都能正常工作啦！

内容的提问来源于stack exchange，提问作者BE-RIZZY