网站垂直分栏内嵌套多区块的布局实现问题

嘿，我来帮你搞定这个垂直分栏里区块高度的问题！你之前碰到的底部间隙和内容添加后的布局混乱，核心原因是用固定百分比（33%）来分配3个区块的高度——这种硬编码的方式太死板，一旦内容变化或者父元素高度不是刚好能被3整除，就会出问题。咱们改用Flexbox来实现，不仅能完美解决间隙问题，还能兼容1个、2个、3个区块的所有分栏场景。

第一步：搭建基础HTML结构 #

先把分栏和区块的框架搭好，每个分栏对应一个容器，里面放对应数量的区块：

<div class="column-wrapper">
  <!-- 含1个区块的分栏 -->
  <div class="vertical-column">
    <div class="content-block">我是单区块内容</div>
  </div>
  <!-- 含2个区块的分栏 -->
  <div class="vertical-column">
    <div class="content-block">双区块之一</div>
    <div class="content-block">双区块之二</div>
  </div>
  <!-- 含3个区块的分栏 -->
  <div class="vertical-column">
    <div class="content-block">三区块之一</div>
    <div class="content-block">三区块之二</div>
    <div class="content-block">三区块之三</div>
  </div>
  <!-- 可以继续添加更多分栏 -->
</div>

第二步：用Flexbox写核心CSS #

重点给每个垂直分栏设置flex-direction: column，然后让每个区块flex:1——这样区块会自动平分分栏的高度，不管分栏里有几个区块，都能完美贴合分栏的上下边界，不会留间隙：

/* 先做全局重置，消除浏览器默认的边距和盒模型问题 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 外层容器，用来放所有垂直分栏 */
.column-wrapper {
  display: flex;
  height: 100vh; /* 让容器占满整个视口高度，实现分栏从顶到底 */
}

/* 单个垂直分栏的样式 */
.vertical-column {
  width: 10vw; /* 你要的10vw宽度 */
  height: 100%;
  display: flex;
  flex-direction: column; /* 让内部区块垂直排列 */
  border: 1px solid #ddd; /* 加个边框方便看布局，实际可以去掉 */
}

/* 分栏内的区块样式 */
.content-block {
  flex: 1; /* 关键！自动平分分栏的可用高度 */
  padding: 1.5rem;
  border-bottom: 1px solid #f0f0f0; /* 区块之间的分隔线 */
  /* 可选：如果内容太多，添加滚动条避免溢出 */
  overflow-y: auto;
}

/* 去掉每个分栏最后一个区块的底部边框 */
.vertical-column .content-block:last-child {
  border-bottom: none;
}

为什么这个方案靠谱？ #

• Flexbox的flex:1会智能分配空间：不管分栏里是1个、2个还是3个区块，每个区块都会自动占据分栏内的均等高度，完全贴合分栏的上下边缘，再也不会有底部间隙。
• 内容适配性强：如果某个区块里的内容变多，overflow-y: auto会自动出现滚动条，不会撑破整个布局。
• 响应式友好：当视口高度变化时，分栏和区块会自动调整高度，始终保持从顶到底的布局。

额外小技巧 #

如果需要某个区块固定高度，其他区块平分剩余空间，只需要调整那个区块的flex属性：
比如给固定高度的区块设置flex: 0 0 250px;（意思是：不收缩、不放大，固定高度250px），剩下的区块保持flex:1，它们就会自动瓜分剩下的高度。

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