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 {&nbsp; height: 100%;}.top {&nbsp; background-color: red;}.bottom {&nbsp; height: 80%;&nbsp; background-color: grey;}.options {&nbsp; height: 100%;&nbsp; overflow: scroll;&nbsp; background: lightblue;}<div class="page">&nbsp; <div class="top">&nbsp; &nbsp; <h1>TOP</h1>&nbsp; </div>&nbsp; <div class="bottom">&nbsp; &nbsp; <h1>Options Menu</h1>&nbsp; &nbsp; <div class="options">&nbsp; &nbsp; &nbsp; <h1>Option 1</h1>&nbsp; &nbsp; &nbsp; <h1>Option 2</h1>&nbsp; &nbsp; &nbsp; <h1>Option 3</h1>&nbsp; &nbsp; &nbsp; <h1>Option 4</h1>&nbsp; &nbsp; &nbsp; <h1>Option 5</h1>&nbsp; &nbsp; &nbsp; <h1>Option 6</h1>&nbsp; &nbsp; &nbsp; <h1>Option 7</h1>&nbsp; &nbsp; &nbsp; <h1>Option 8</h1>&nbsp; &nbsp; &nbsp; <h1>Option 9</h1>&nbsp; &nbsp; &nbsp; <h1>Option 10</h1>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

您需要在容器上设置最大高度才能触发滚动，我在此处添加一个示例：.page {&nbsp; height: 10vh;&nbsp;&nbsp;}.top {&nbsp; background-color: red;}.bottom {&nbsp; background-color: grey;}.options {&nbsp; height: auto;&nbsp; overflow-y: scroll;&nbsp; background-color: green;&nbsp; max-height: 100vh;}<div class="page">&nbsp; <div class="top">&nbsp; &nbsp; <h1>TOP</h1>&nbsp; </div>&nbsp; <div class="bottom">&nbsp; &nbsp; <h1>Options Menu</h1>&nbsp; &nbsp; <div class="options">&nbsp; &nbsp; &nbsp; <h1>Option 1</h1>&nbsp; &nbsp; &nbsp; <h1>Option 2</h1>&nbsp; &nbsp; &nbsp; <h1>Option 3</h1>&nbsp; &nbsp; &nbsp; <h1>Option 4</h1>&nbsp; &nbsp; &nbsp; <h1>Option 5</h1>&nbsp; &nbsp; &nbsp; <h1>Option 6</h1>&nbsp; &nbsp; &nbsp; <h1>Option 7</h1>&nbsp; &nbsp; &nbsp; <h1>Option 8</h1>&nbsp; &nbsp; &nbsp; <h1>Option 9</h1>&nbsp; &nbsp; &nbsp; <h1>Option 10</h1>&nbsp; &nbsp; &nbsp; <h1>Option 11</h1>&nbsp; &nbsp; &nbsp; <h1>Option 12</h1>&nbsp; &nbsp; &nbsp; <h1>Option 13</h1>&nbsp; &nbsp; &nbsp; <h1>Option 14</h1>&nbsp; &nbsp; &nbsp; <h1>Option 15</h1>&nbsp; &nbsp; &nbsp; <h1>Option 16</h1>&nbsp; &nbsp; &nbsp; <h1>Option 17</h1>&nbsp; &nbsp; &nbsp; <h1>Option 18</h1>&nbsp; &nbsp; &nbsp; <h1>Option 19</h1>&nbsp; &nbsp; &nbsp; <h1>Option 20</h1>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

要激活滚动，在您的情况下，列表需要一个高度值，该类options没有定义高度，因此请height为该类定义一个（根据您的需要）options。.page {&nbsp; height: 100%;}.top {&nbsp; height: 100%;&nbsp; background-color: red;}.bottom {&nbsp; height: 100%;&nbsp; background-color: grey;}.options {&nbsp; overflow: scroll;&nbsp; height:200px;}<div class="page">&nbsp; <div class="top">&nbsp; &nbsp; <h1>TOP</h1>&nbsp; </div>&nbsp; <div class="bottom">&nbsp; &nbsp; <h1>Options</h1>&nbsp; &nbsp; <div class="options">&nbsp; &nbsp; &nbsp; <h1>Option 1</h1>&nbsp; &nbsp; &nbsp; <h1>Option 2</h1>&nbsp; &nbsp; &nbsp; <h1>Option 3</h1>&nbsp; &nbsp; &nbsp; <h1>Option 4</h1>&nbsp; &nbsp; &nbsp; <h1>Option 5</h1>&nbsp; &nbsp; &nbsp; <h1>Option 6</h1>&nbsp; &nbsp; &nbsp; <h1>Option 7</h1>&nbsp; &nbsp; &nbsp; <h1>Option 8</h1>&nbsp; &nbsp; &nbsp; <h1>Option 9</h1>&nbsp; &nbsp; &nbsp; <h1>Option 10</h1>&nbsp; &nbsp; </div>&nbsp; </div></div>