溢出-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;
}

感谢您的所有帮助！