CSS等高布局是指多个垂直方向上的盒子高度相等。在这种布局中，盒子的高度不取决于它们内部的内容，而是取决于列中的最高元素。其中一种方法是通过使用三个HTML元素，让它们嵌套在一起，并应用CSS样式。

三个盒子嵌套的结构分别为外层容器、内层容器和内容容器。以外层容器为基础，内层容器设置为负外边距，使其上浮并与其他相邻元素重叠。然后，将内容容器的高度设置为100%，使其填充其父元素。

<div class="outer">
   <div class="inner">
      <div class="content">
         ...
      </div>
   </div>
</div>

.outer {
   display: table;
   width: 100%;
}
.inner {
   display: table-cell;
   width: 1%;
   padding: 10px;
   background: #ececec;
   vertical-align: top;
   margin-bottom: -99999px;
   padding-bottom: 99999px;
}
.content {
   height: 100%;
   background: #ffffff;
}

这个示例中，外层容器设置为“display:table”，并占据整个页面宽度。内层容器设置为“display:table-cell”，并为自身设置“width:1%”，这将使内部元素能够忽略外部包装盒子的宽度，并允许它们自己撑开盒子。

与此同时，内层容器设置“margin-bottom:-99999px; padding-bottom:99999px;”，这是为了生成等高布局所必需的，因此，当您在内容区域添加更多内容时，它们将自动扩展并向下延伸。最后，注意将内容盒子的高度设置为100%，以让它填充整个空间。

这种CSS等高布局适用于任何情况下，特别是在多列布局中非常有用，完全不需要使用JavaScript或其他技术。虽然您可以使用其他技术来实现这个布局，但这种解决方案是最简单且最易于理解的。