CSS 两列，一列高度限制为另一列的内容答案

【问题标题】：CSS two columns with one column height limited to another's contentCSS 两列，一列高度限制为另一列的内容
【发布时间】：2021-07-07 11:29:37
【问题描述】：

我需要一个两列（等宽）容器，其中高度由第一列的内容决定。第二列的高度应该缩小（如果更高）或增加（如果更短）。

| first column | second column |
| unknown      | ...           |
| amount       | ...           |
| of           | ...           |
| content      | ...           |

使用grid 或flex 完成基本布局后，如果没有JS，高度是否可行？

【问题讨论】：

看这个：codepen.io/mariemosley/pen/1d42e2788393bf7243c3e0f9ce998f4a
stackoverflow.com/questions/2114757/css-equal-height-columns - 是的，你可以在没有任何 js 的情况下使用 flex 或 grid

标签： css

【解决方案1】：

您需要绝对定位第二列，给它height:100%，并将其内容包装在另一个具有oveflow: scroll 的容器中。容器需要有height: inherit 或height: auto

两列都应该有明确的宽度。

示例 1

.overflow-scroll {
  overflow: scroll;
}

.d-flex {
  display: flex;
}

.p-relative {
  position: relative;
}

.p-absolute-0 {
  position: absolute;
  right: 0;
  top: 0;
}

.h-100 {
  height: 100%;
}

.w-50 {
  width: 50%;
}


.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

<div class="d-flex p-relative">
  <div class="bg-red w-50">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque modi enim aut repudiandae id blanditiis tempore cupiditate eius veritatis rerum veniam minus laborum, hic nihil similique illo temporibus consequatur adipisci? Lorem ipsum dolor sit amet
    consectetur adipisicing elit. Consequatur minima et quod cumque inventore itaque earum saepe, ea amet rem labore! Sapiente unde tempora dolor illo magnam qui consectetur culpa!
  </div>
  <div class="w-50 p-absolute-0 h-100 bg-blue">
    <div class="overflow-scroll h-100">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?

      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
      facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
      Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
      voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
      rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
    </div>
  </div>
</div>

示例 2

.overflow-scroll {
  overflow: scroll;
}

.d-flex {
  display: flex;
}

.p-relative {
  position: relative;
}

.p-absolute-0 {
  position: absolute;
  right: 0;
  top: 0;
}

.h-100 {
  height: 100%;
}

.w-50 {
  width: 50%;
}



.bg-red {
  background: red;
}

.bg-blue {
  background: blue;
}

<div class="d-flex p-relative">
  <div class="bg-red w-50">
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt quia asperiores quidem nostrum id, nemo quis consectetur neque maiores, numquam temporibus? Autem, aliquid? Nemo ullam debitis placeat aperiam, voluptate distinctio! Incidunt, perspiciatis
    tempore nostrum, laboriosam facere ut exercitationem sapiente eligendi, velit veritatis numquam illum doloribus perferendis quas odio rerum eum. Recusandae officia tempore sed non excepturi quam sint minima ex. Assumenda fuga laborum ipsa perferendis
    ducimus quisquam harum et animi minus eius. Saepe ea mollitia facilis soluta! At doloribus accusantium sapiente rerum illum veritatis, quam eveniet iusto eius, quis tempora. Aperiam provident neque molestias saepe? Non quaerat quas nam earum, atque
    aperiam consectetur numquam tenetur, eius ducimus corrupti voluptatibus ad harum itaque obcaecati recusandae porro enim pariatur facere, labore cupiditate. Quod magni laborum, modi animi a nulla sit ea fugiat explicabo provident deserunt aliquid veniam
    odit quaerat maxime officia tempora earum enim. Voluptates officiis aliquam dolorum sunt laudantium cum earum?
  </div>
  <div class="w-50 p-absolute-0 h-100 bg-blue">
    <div class="overflow-scroll h-100">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

您还可以制作一个包含这 2 个 div 的大 div。

在第 1 部分有所有信息。哟

把你的右栏的高度设置为height：继承；和左栏高度的高度：auto；应该工作

【讨论】：

【解决方案3】：

如果您将右列 position: absolute 与 overflow: hidden 和容器上的列 background-color 一起制作，则可以使右列看起来始终与左列相同。

.container {
  background-color: green;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.firstcolumn {
  background-color: red;
  width: 50%;
}

.secondcolumn {
  width: 50%;
  position: absolute;
  right: 0;
  top: 0;
}

<div class="container">
  <div class="firstcolumn">
    <p>first column</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
  </div>
  <div class="secondcolumn">
    <p>second column</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
    <p>unknown</p>
    <p>amount</p>
    <p>of</p>
    <p>content</p>
</div>

【讨论】：

我需要第二列（内容更长）不要比第一列长。