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%，但是如果更改了父元素的大小，则可以cause problems。）

Answer 2

所以我知道了。我试图将“ booking-filters-list”的高度列为侧边栏的高度，而不是窗口的高度。所需要做的就是实际在侧边栏中设置窗口高度的内容。

在这种情况下，窗口的最大高度将为850px；

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

感谢所有帮助！

溢出-y滚动高度有问题

2 个答案: