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

你可以通过包装第一个单元格（我在这里用first类调用它）并将其称为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。

也许你必须调整宽度。见下面的例子：

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

干杯！请告诉我您对此的反馈。谢谢！

Answer 2

试试这个，

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;
}

Div高度遵循较小的div高度

2 个答案: