响应式布局中实现一行内所有div背景高度一致的问题

嘿，这个坑我之前也踩过！手动测量高度的方式在响应式场景下肯定会翻车——小屏幕下内容换行、高度暴涨是完全没法提前预判的。给你两个简单靠谱的方案，轻松让首尾div自动跟中间内容div保持高度一致：

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

Flexbox天生就支持子元素等高对齐，直接给父容器开启Flex模式就行，完全不用管高度：

/* 父容器样式 */
.parent-container {
  display: flex;
  gap: 12px; /* 可选，给三个子div之间加间距，看着更舒服 */
}

/* 左侧箭头div */
.left-arrow {
  background: url('你的箭头图标路径') center center no-repeat;
  width: 40px; /* 只需要设置宽度，高度会自动拉伸匹配中间内容 */
  background-size: contain; /* 让图标自适应div大小，避免变形 */
}

/* 中间内容div */
.content-area {
  flex: 1; /* 让中间div占满父容器的剩余空间 */
  padding: 10px 15px;
  /* 这里不用设置高度，由内容自动撑开 */
}

/* 右侧背景div */
.right-bg {
  background-color: #f5f5f5; /* 你的右侧背景样式 */
  width: 60px; /* 同样只设宽度，高度自动匹配 */
}

原理很简单：开启display: flex后，父容器的高度会被最高的子元素（也就是中间的内容div）撑起来，另外两个子元素默认会被align-items: stretch属性拉伸到和父容器一样高，完美适配任何屏幕下的内容高度变化。

方案二：用CSS Grid布局 #

如果你更习惯Grid的写法，这个方案同样好用：

/* 父容器样式 */
.parent-container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* 第一、三列宽度自定义，中间列占满剩余空间 */
  gap: 12px;
}

/* 左侧箭头div */
.left-arrow {
  background: url('你的箭头图标路径') center no-repeat;
  width: 40px;
  background-size: contain;
}

/* 中间内容div */
.content-area {
  padding: 10px 15px;
}

/* 右侧背景div */
.right-bg {
  background-color: #f5f5f5;
  width: 60px;
}

Grid布局下，同一行的所有列高度会自动统一为最高列的高度，所以首尾div会自动跟上中间内容的高度变化，效果和Flex完全一致。

关键注意点 #

一定要把之前手动设置的height: XXXpx或者固定的min-height全部删掉，让布局自己去计算高度——固定高度就是导致响应式下高度不匹配的罪魁祸首！

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