html - 如何根据div的高度应用滚动？

Question

我在扩展高度时遇到对齐问题。

场景:我有一个 div 标签，如果 div 的高度将超过固定高度，我需要在其中应用滚动。对于固定高度滚动将不适用。

请帮忙解决这个问题。

#configurator .content .white-box {
  background-color: white;
  border: 1px solid #cecece;
  /*overflow:scroll;*/
}
#configurator .content .white-box-accessory {
  background-color: white;
  border: 1px solid #cecece;
  height: 50px;
  overflow: scroll;
}
#configurator .content .white-box-services {
  background-color: white;
  border: 1px solid #cecece;
  height: 50px;
  overflow: scroll;
}

<div class="white-box">
  <div>
    <p>Accasory Header
    </p>
  </div>
  <div class="white-box-accessory">
    <p>
      Accesory 1
      <br>Accesory 2
      <br>Accesory 3
      <br>Accesory 4
      <br>Accesory 5
      <br>Accesory 6
      <br>Accesory 7
      <br>Accesory 8
    </p>
  </div>
  <div>
    <p>Services Header
    </p>
  </div>
  <div class="white-box-services">
    <p>
      Services 1
      <br>Services 2
      <br>Services 3
      <br>Services 4
      <br>Services 5
      <br>Services 6
      <br>Services 7
      <br>Services 8
    </p>
  </div>
</div>

Answer 1

首先向您要定位的所有 div 添加一个 CSS 类。我用过滚动。然后添加一个max-height设置固定高度，然后添加overflow-y:auto当内容超过max-height<时添加滚动.

在下面的代码片段中，我从您的代码中删除了一些服务以演示效果。

.scroll {
  max-height: 300px;
  overflow-y: auto;
  height: 50vh;
}

<div class="white-box">
  <div>
    <p>Accasory Header
    </p>
  </div>

  <div class="white-box-accessory scroll">
    <p>
      Accesory 1
      <br>Accesory 2
      <br>Accesory 3
      <br>Accesory 4
      <br>Accesory 5
      <br>Accesory 6
      <br>Accesory 7
      <br>Accesory 8
    </p>
  </div>

  <div>
    <p>Services Header
    </p>
  </div>

  <div class="white-box-services scroll">
    <p>
      Services 1
      <br>Services 2
      <br>Services 3
      <br>Services 4
    </p>
  </div>

</div>