时间戳

首页 > 解决方案 > 溢出-y滚动高度的问题

javascript - 溢出-y滚动高度的问题

问题描述

我知道，这确实是一个菜鸟问题，但我只需要一些其他的眼睛。

我有一个移动侧边栏出现。正文设置为溢出：隐藏；。我试图让侧边栏显示溢出-y：滚动，然后允许侧边栏滚动全高，但它允许的最大值是 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 ;
}

标签： javascripthtmlcss

解决方案

我不能确定，但​​这就是你要找的吗？

.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%会起作用，但如果更改父元素的大小，可能会导致问题。）

推荐阅读