CSS 使子 div 高度为 100%，并在必要时可滚动

Question

考虑以下堆叠的 div：.page {  height: 100%;}.top {  height: 100%;  background-color: red;}.bottom {  height: 100%;  background-color: grey;}.options {  height: 100%;  overflow: scroll;}<div class="page">  <div class="top">    <h1>TOP</h1>  </div>  <div class="bottom">    <h1>Options Menu</h1>    <div class="options">      <h1>Option 1</h1>      <h1>Option 2</h1>      <h1>Option 3</h1>      <h1>Option 4</h1>      <h1>Option 5</h1>      <h1>Option 6</h1>      <h1>Option 7</h1>      <h1>Option 8</h1>      <h1>Option 9</h1>      <h1>Option 10</h1>    </div>  </div></div>如何更改它以仅允许选项滚动，而不允许页面滚动？

Answer 1

当您有多个同级 div 时height:100%，它们各自占据父 div 高度的 100%，基本上是父 div 高度的两倍：

html,body{height:100%;margin:0}

h1{margin:0}

.page {

  height: 100%;

}

.top {

  background-color: red;

}

.bottom {

  height: 80%;

  background-color: grey;

}

.options {

  height: 100%;

  overflow: scroll;

  background: lightblue;

}

<div class="page">

  <div class="top">

    <h1>TOP</h1>

  </div>

  <div class="bottom">

    <h1>Options Menu</h1>

    <div class="options">

      <h1>Option 1</h1>

      <h1>Option 2</h1>

      <h1>Option 3</h1>

      <h1>Option 4</h1>

      <h1>Option 5</h1>

      <h1>Option 6</h1>

      <h1>Option 7</h1>

      <h1>Option 8</h1>

      <h1>Option 9</h1>

      <h1>Option 10</h1>

    </div>

  </div>

</div>

Answer 2

您需要在容器上设置最大高度才能触发滚动，我在此处添加一个示例：

.page {

  height: 10vh;

  

}

.top {

  background-color: red;

}

.bottom {

  background-color: grey;

}

.options {

  height: auto;

  overflow-y: scroll;

  background-color: green;

  max-height: 100vh;

}

<div class="page">

  <div class="top">

    <h1>TOP</h1>

  </div>

  <div class="bottom">

    <h1>Options Menu</h1>

    <div class="options">

      <h1>Option 1</h1>

      <h1>Option 2</h1>

      <h1>Option 3</h1>

      <h1>Option 4</h1>

      <h1>Option 5</h1>

      <h1>Option 6</h1>

      <h1>Option 7</h1>

      <h1>Option 8</h1>

      <h1>Option 9</h1>

      <h1>Option 10</h1>

      <h1>Option 11</h1>

      <h1>Option 12</h1>

      <h1>Option 13</h1>

      <h1>Option 14</h1>

      <h1>Option 15</h1>

      <h1>Option 16</h1>

      <h1>Option 17</h1>

      <h1>Option 18</h1>

      <h1>Option 19</h1>

      <h1>Option 20</h1>

    </div>

  </div>

</div>

Answer 3

要激活滚动，在您的情况下，列表需要一个高度值，该类options没有定义高度，因此请height为该类定义一个（根据您的需要）options。

.page {

  height: 100%;

}

.top {

  height: 100%;

  background-color: red;

}

.bottom {

  height: 100%;

  background-color: grey;

}

.options {

  overflow: scroll;

  height:200px;

}

<div class="page">

  <div class="top">

    <h1>TOP</h1>

  </div>

  <div class="bottom">

    <h1>Options</h1>

    <div class="options">

      <h1>Option 1</h1>

      <h1>Option 2</h1>

      <h1>Option 3</h1>

      <h1>Option 4</h1>

      <h1>Option 5</h1>

      <h1>Option 6</h1>

      <h1>Option 7</h1>

      <h1>Option 8</h1>

      <h1>Option 9</h1>

      <h1>Option 10</h1>

    </div>

  </div>

</div>