html - 将容器设置为固定高度和可滚动

Question

我有以下内容:

<section class="table">
  <div class="table-row">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
  </div>
  <div class="table-row">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
  </div>
</section>

如何设置 <section>到固定高度，以便我需要滚动才能看到更多行？

Answer 1

您还需要一个环绕 .table 的位置。在父元素上应用 css overflow-y 和 height。

.table-holder {
  overflow-y: auto;
  width: 200px;
  height: 80px;
  float: left;
}
.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}

<section class="table-holder">
  <div class="table">
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
    <div class="table-row">
      <div class="table-cell">Cell 1</div>
      <div class="table-cell">Cell 2</div>
      <div class="table-cell">Cell 3</div>
    </div>
  </div>
</section>