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。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

为此，您需要将overflow-x和height应用于<section>课程。

overflow-x属性指定如何处理内容的顶部/底部边缘 - 如果它溢出元素的内容区域。

.table {
      height: 100px; /* For fixed height */
      width: 100px;
      overflow-y: scroll; /* For scrolling */
}

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

关于overflow财产的更多有用信息：

Answer 3

将此代码添加到您的css

section.table {
    height: 55px;
    overflow: scroll;
}

如果您只想垂直滚动，请使用overflow-y:scroll;或水平overflow-x:scroll;

将容器设置为固定高度并可滚动

3 个答案: