溢出-y滾動高度有問題

Question

我知道，這確實是一個菜鳥問題，但我只需要其他眼睛即可。

我出現了一個移動側邊欄。 正文設置為溢出：隱藏；。 我正在嘗試使側邊欄顯示帶有溢出y：scroll，然后允許側邊欄滾動全高，但其最大允許值為1000px；

我想要達到的效果類似於響應式移動顯示中的Hotels.com縮小結果側邊欄。 側邊欄HTML代碼：

<div class="filters-sidebar>
  <aside class="booking-filters>
    <h3>Filter By:</h3>
    <ul class="booking-filters-list">
      <li>Booking item</li>
      <li>Booking item</li>
      <li>Booking item</li>
      <li>Booking item</li>
       ...Lots more of these...
    </ul>
  </aside>
</div>

側邊欄CSS代碼：

.filters-sidebar {
  postion:absolute;
  left: 0;
  top: 0;
}

.filters-sidebar .booking-filters-list {
  overflow-y: scroll;
  height: 2000px ;
}

Answer 1

我不能確定，但​​這是您要尋找的嗎？

 .booking-filters { position: absolute; left: 0; top: 0; width: 200px; height: 100vh; overflow-y: scroll; } .booking-filters-list { height: 2000px; } body { overflow-y: hidden; } 

 <div class="filters-sidebar"> <aside class="booking-filters"> <h3>Filter By:</h3> <ul class="booking-filters-list"> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> <li>Booking item</li> ...Lots more of these... </ul> </aside> </div> 

在您的代碼中缺少一對引號，並且position拼寫錯誤，因此可能引起了一些問題。 除此之外，我更改了overflow-y屬性的位置，並將.booking-filters的高度設置為100vh ，以使其垂直填充屏幕。

（在這種情況下，可以使用100% ，但是如果更改父元素的大小，可能會導致問題 。）

Answer 2

所以我想通了。 我試圖將“ booking-filters-list”的高度列為側邊欄的高度，而不是窗口的高度。 所需要做的就是實際在側邊欄中設置窗口高度的內容。

在這種情況下，窗口的最大高度將為850px。

.booking-filters-list {
  overflow-y: scroll;
  height: 850px;
}

感謝您的所有幫助！