HTML 创建两列布局同时保持列背景颜色的完整尺寸

在两列布局中，内容被组织成两列等宽的列。然而，要确保每列的背景颜色填满内容的完整高度可能是一种挑战，尤其当每列的内容长度不同时。

CSS网格是另一种创建具有多列响应式布局的选项。还可以使用旧的布局方法，比如浮动和基于表格的布局，但由于其限制和缺乏灵活性，不推荐使用。

步骤

定义一个包裹器类，设置display属性为flex。这将为两列创建一个flex容器。
定义左列类，将flex−grow属性设置为1。这将使左列填满容器中的可用空间。同时，设置左列的背景颜色。
定义右列类，将flex−grow属性设置为1。这将使右列填满容器中的可用空间。同时，设置右列的背景颜色。
在包装器元素内添加左列内容和右列内容。
最终结果是一个宽度相等的两列布局，其中左列为红色（#e62626），右列为较深的红色阴影（#864f4f）。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Column Layout</title>
<!------------------------- CSS ---------------------------->
<style>

  /* Define a flex container with the wrapper class */
  .wrapper {
  display: flex;
  }

  /* Define the left column with flex-grow set to 1 to fill the available space, and set the background color */
  .left-column {
  flex: 1;
  background-color: #e62626;
  }

  /* Define the right column with flex-grow set to 1 to fill the available space, and set the background color */
  .right-column {
  flex: 1;
  background-color: #864f4f;
  }

</style>

</head>

<body>

  <div class="wrapper">
    <div class="left-column">
      <!-- content for the left column -->
      <h1>Left column</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum dolorem ab magni rerum. Molestiae facere libero ut magnam, accusamus id voluptas eligendi officiis a harum eaque, autem obcaecati? Distinctio, recusandae.</p>
    </div>
    <div class="right-column">
      <!-- content for the right column -->
      <h1>Right column</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae necessitatibus beatae ullam reiciendis aliquid dolorum explicabo quod consectetur deleniti, maxime quo laudantium sed vel iure nemo! In molestiae aliquid quasi?</p>
    </div>
  </div>

</body>
</html>

然而，这并不适用于复杂的布局或需要对元素位置进行精确控制的设计。对不支持CSS3弹性盒模型的旧版浏览器的支持有限。这需要仔细考虑内容层次结构，以确保在较小的屏幕上正确显示栏目流动。一旦实施，可能难以对布局进行更改。