考慮以下堆疊的 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貢獻1875條經驗 獲得超3個贊
當您有多個同級 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>
天涯盡頭無女友
TA貢獻1831條經驗 獲得超9個贊
您需要在容器上設置最大高度才能觸發滾動，我在此處添加一個示例：
.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>
白衣非少年
TA貢獻1155條經驗 獲得超0個贊
要激活滾動，在您的情況下，列表需要一個高度值，該類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>
- 3 回答
- 0 關注
- 284 瀏覽
添加回答
舉報
0/150
提交
取消