第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

CSS 使子 div 高度為 100%，并在必要時可滾動

CSS 使子 div 高度為 100%，并在必要時可滾動

婷婷同學(xué)_ 2023-10-30 20:01:10
考慮以下堆疊的 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>如何更改它以僅允許選項滾動，而不允許頁面滾動？
查看完整描述

3 回答

?
翻過高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗 獲得超3個贊

當(dāng)您有多個同級 div 時height:100%，它們各自占據(jù)父 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>


查看完整回答
反對 回復(fù) 2023-10-30
?
天涯盡頭無女友

TA貢獻(xiàn)1831條經(jīng)驗 獲得超9個贊

您需要在容器上設(shè)置最大高度才能觸發(fā)滾動，我在此處添加一個示例：


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


查看完整回答
反對 回復(fù) 2023-10-30
?
白衣非少年

TA貢獻(xiàn)1155條經(jīng)驗 獲得超0個贊

要激活滾動，在您的情況下，列表需要一個高度值，該類options沒有定義高度，因此請height為該類定義一個（根據(jù)您的需要）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>


查看完整回答
反對 回復(fù) 2023-10-30
  • 3 回答
  • 0 關(guān)注
  • 330 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號