CSS 经典布局实现-等高布局在进行多栏布局时，我们经常会碰到因为内容大小不一导致各栏高度不一样的问题，比如圣杯布局中三

前言

在进行多栏布局时，我们经常会碰到因为内容大小不一导致各栏高度不一样的问题，比如圣杯布局中三栏的高度问题。这个时候我们就需要使用等高布局让各栏的高度对齐。本文介绍了利用实现等高布局的方案。

本文等高布局均以三栏布局为例，默认结构和样式参考如下。

HTML 代码：

<div class="container">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

CSS 代码：

.left {
  background-color: red;
}
.center {
  background-color: green;
}
.right {
  background-color: blue;
}

此方法适用以 float 实现的布局，可以以圣杯布局或使用 float 实现的简单三栏布局为例。
设置一个大数值的 padding-bottom，再设置相同数值的负的 margin-bottom，如果设置了背景颜色，很容易发现视觉上三栏仍然是不齐的，并且高度变得很大，但盒模型“撑起来”的高度并没有发生变化。
三栏需要被容器 container 包裹，在 container 上设置 overflow:hidden，开启 BFC，使得外部容器高度可以被撑起，并截去超出盒模型实际高度的地方，这样视觉上就变为等高的了。

.container {
  overflow: hidden;
}
.center,
.left,
.right {
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}

设置 display: table; 和 display: table-cell; 可以把普通元素变为 table 元素的实现效果。模仿 table 样式实现等高。
该方法比完全使用 table 布局减少大量冗余代码，简单易实现。

.container {
  display: table;
}
.center,
.left,
.right {
  display: table-cell;
}

.container {
  display: flex;
}

.container {
  display: grid;
  grid-auto-flow: column;
}