创建两列布局，同时保持列背景色为完整尺寸

htmlweb developmentfront end technology更新于 2024/12/19 6:04:17

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

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>

  /* 使用包装类定义一个弹性容器 */
  .wrapper {
  display: flex;
  }

  /* 定义左列，将 flex-grow 设置为 1，以填充可用空间，并设置背景颜色 */
  .left-column {
  flex: 1;
  background-color: #e62626;
  }

  /* 定义右列，将 flex-grow 设置为 1，以填充可用空间，并设置背景颜色 */
  .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 弹性框的旧版浏览器的支持有限。这需要仔细考虑内容层次结构，以确保在较小的屏幕上正确排列列。布局一旦实施，更改起来可能会比较困难。