CODEWITHSUNDEEP
javascripthtmlcss
f1ss1on
f1ss1on

Reputation: 178

Trouble with Overflow-y scroll height

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

Upvotes: 0

Views: 197

Answers (2)

f1ss1on
f1ss1on

Reputation: 178

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!

Upvotes: 0

StardustGogeta
StardustGogeta

Reputation: 3406

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

Upvotes: 1

Related Questions