Div 高度跟随更小的 div 高度

Question

我有两个 div，一个挨着一个。左边会有很多内容，所以我想在上面放滚动条。右侧 div 的内容较少，因此左侧 div 应遵循右侧 div 的高度。

右侧 div 的内容是动态的，因此我无法设置左侧 div 的 max-height。我尝试使用 display:table-cell 但没有成功。

.container {
  display: table;
  border: 2px solid red;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 30px;
  border: 2px solid blue;
}

<div class="container">
  <div class="row">
    <div class="cell">CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.</div>
    <div class="cell">CELL2: lorem lorem lorem lorem</div>
  </div>
</div>

JSFIDDLE DEMO

Answer 1

试试这个，

HTML

<div class="container">
  <div class="row">
    <div class="cell">
    <div class="cell-content">
    CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
    </div>
    </div>
    <div class="cell">
       <div class="cell-content">CELL2: lorem lorem lorem lorem </div>
    </div>
  </div>
</div>

CSS

.container {
  display: table;
  border: 2px solid red;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  width: 30px;
  border: 2px solid blue;
}
.cell-content{
  max-height:200px;  /* as per your requirement */
  overflow:auto;
}

Answer 2

您可以通过包装第一个单元格（我在这里用 first class 称呼它）并称它为 absolute.

来做到这一点

<div class="cell first">
  <div>
  CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
    </div>
</div>

并应用这个：

.cell.first div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

和 overflow-y: auto 每个 cell。

也许您需要调整宽度。请参阅下面的示例：

.container {
  display: table;
  border: 2px solid red;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 30px;
  border: 2px solid blue;
  position: relative;
  overflow-y: auto;
}

.cell.first div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="cell first">
      <div>
      CELL1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus a facilis saepe. Commodi exercitationem, provident nemo ea distinctio dolor ullam ab facere blanditiis inventore debitis nobis vitae maxime suscipit accusantium.
      </div>
    </div>
    <div class="cell">CELL2: lorem lorem lorem lorem</div>
  </div>
</div>

干杯！让我知道您对此的反馈。谢谢！

Div 高度跟随更小的 div 高度

Div height follow smaller div height

html

css

css-position

css-tables