双栏网页布局：如何让两栏始终撑满页面全高

当前布局出现空白的本质是两个规则的冲突：

• 两栏设置的min-height: 100vh是相对于浏览器初始视口高度计算的，不会随页面内容滚动、被兄弟栏撑高后同步变化
• float布局下，两栏属于脱离常规文档流的浮动元素，自身高度独立计算，没有联动匹配父容器总高度的机制

当左侧导航栏内容更长、把整个页面总高度撑到超过初始视口高度时，右侧栏因为仍停在初始100vh的高度，自然会在下方漏出无背景的父级区域。

方案1：最快改完（零结构调整，3行代码搞定） #

不用修改现有float布局逻辑，直接利用固定视口的分块渐变背景覆盖全页面：

• 移除.column1和#column2自身写死的背景色、独立min-height:100vh规则
• 给body添加分块渐变背景，固定到视口：

body {
  min-height: 100vh;
  /* 0-25%宽度区间填充左栏背景色，25%-100%区间填充右栏背景色，替换为你实际使用的色值即可 */
  background: linear-gradient(to right, #左栏实际色值 0%, #左栏实际色值 25%, #右栏实际色值 25%, #右栏实际色值 100%);
  background-attachment: fixed;
}

这个方案的效果是，不管哪个栏的内容更长、页面总高度是多少，整个页面从顶到底永远保持左25%、右75%的分块背景，完全不会出现漏白的情况，不需要手动计算高度，改动量最小。

方案2：最稳定（推荐长期使用，一次改完无后续bug） #

把float布局替换为现代Flex布局，从机制上保证两栏高度自动拉满：

• 移除两栏的float属性、独立设置的min-height:100vh
• 保留原有全局重置规则，给body加flex布局：

/* 原有全局规则保留 */
html, body {
  margin: 0;
  padding: 0;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: flex; /* 替代原有float布局逻辑 */
}
.column1 {
  width: 25%;
  background: #左栏背景色值;
}
#column2 {
  width: 75%;
  background: #右栏背景色值;
}

Flex布局下默认的交叉轴对齐规则是stretch，两个栏会自动被拉伸到和body同等的总高度——不管左侧栏内容多长，右侧栏的背景都会自动匹配整个页面的全高，不需要任何hack操作。

方案3：保留现有float结构的最小逻辑改动 #

如果完全不想放弃当前写好的float代码，只需要改两个核心规则就能解决问题：

• 给body加清除浮动的规则，让body的高度能正确被最高的浮动元素撑起来，不会因为浮动元素脱离文档流出现高度塌陷：

body::after {
  content: '';
  display: block;
  clear: both;
}

• 把两栏原来写的min-height: 100vh改成min-height: 100%
  之前用100vh的问题是这个值永远绑定初始视口高度，不会随页面总高度变化
  改成100%后，栏的高度会相对于父容器（body）的实际计算高度匹配，当左侧栏把body撑高后，右侧栏会自动同步撑到全高，背景完全覆盖页面。

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