Trouble with Overflow-y scroll height

Question

I know, this is really a noob question but I just need some other eyes.

I have a mobile sidebar that appears. The body is set to overflow: hidden;. I am trying to have the sidebar display with an overflow-y:scroll and then allow the sidebar to scroll full height but the max its allowing is 1000px;

What I am trying to acheive is something similar to Hotels.com Narrow Results sidebar in responsive mobile display. sidebar HTML Code:

<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>

sidebar CSS code:

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

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

Please post your HTML as well. Without it, we can't even begin to help. Please read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — disinfor, Jul 22 '19 at 18:55

StardustGogeta · Answer 1 · 2019-07-22T19:40:46.823

I can't tell for sure, but is this what you are looking for?

.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>

There were a couple missing quotes and position was misspelled in your code, so that may have been causing some problems. Besides that, I changed the location of the overflow-y attribute and gave .booking-filters a height of 100vh so that it fills the screen vertically.

(Using 100% would work in this instance, but could cause problems if the sizing of the parent element were altered.)

@ZainAli Good call, I forgot about that. – StardustGogeta Jul 22 '19 at 19:41 — StardustGogeta, Jul 22 '19 at 19:41

score 0 · Answer 2 · answered Jul 22 '19 at 19:42

So I figured it out. I was trying to put the height of the booking-filters-list the height of the sidebar instead of the height of the window. All that is needed is to actually set contents in the sidebar the height of the window.

In this case, the max height of the window would be 850px;

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

Thanks for all the help!

Trouble with Overflow-y scroll height

2 Answers2