CODEWITHSUNDEEP
jqueryhtmlcss
Debajyoti Das
Debajyoti Das

Reputation: 2138

Position fixed sidebar with overflow scroll not scrolling to bottom

I am trying to implement a fixed sidebar with dynamically loaded items onclick a Load More button.

I am attaching a class fixed to the parent sidebar div and innerscroll to the inner div to make it scrollable. 

.fixed{position:fixed;top:0; bottom:0}
.innerscroll{overflow-y:scroll;height:100%}

Sidebar code

<div id="sidebar" class="sticky">
 <div class="cat-select"><select>
...
</select></div>
  <div class="item">
<section id="ajax-load-more">
... ajax content...
</section>      
  </div>
</div>

Can't figure out why after loading the next set of posts I can't scroll to the end such that the load-more button is visible.

Upvotes: 5

Views: 11038

Answers (5)

Ashish Kumar
Ashish Kumar

Reputation: 3039

OK, I got it. Just add two lines in your .fixed class:

.fixed {
   position: fixed;
   top: 0;
   bottom: 45px; /* added */
   min-height: 0 !important; /* added */
}

And this will work exactly as you expected. Good luck!

Upvotes: 6

brouxhaha
brouxhaha

Reputation: 4093

Start by taking the min-height: 1000px off #sidebar. Then choose your poison below for .innerscroll.

It's hiding the button at the bottom because .cat-select has a height of 22px. Setting height: 100% sets .innerscroll to the height of the parent, no matter what other children are in the parent div. So if the parent is 500px, .innerscroll will also be 500px, just bumped down by 22px. Bumping it down causes this 22px to be hidden at the bottom of the div. You can see this by setting position: absolute; top: 0 on .innerscroll.

Three options (number three being my personal choice): DEMO

  1. You can use height: calc(100% - 22px) if calc works for your implementation (caniuse.com).

  2. Or you can shrink .innerscroll as has been specified in other answers (height: 98% or whatever works for your case).

  3. Or you can set position: absolute; top: 0; to .innerscroll, then set margin-top: 22px on .listing. This will set the scrolling div with overflow-y to match top and bottom of the parent, and cause the 22px push down inside that div.

Upvotes: 1

digitalextremist
digitalextremist

Reputation: 5993

CSS is ( over ) compensating for your ( hidden ) 45px tall header bar!

All you need to do is bravely & mysteriously use bottom: 45px and not bottom: 0px in your CSS:

.fixed{
    position: fixed;
    top: 0px;
    bottom: 45px;
}

I have your demo interface working perfectly if I open my Element Inspector and change only the above.

Using percentage based heights is not an exact fix for you ( or anyone ). There will be gaps that way.

Upvotes: 1

Dustin Snider
Dustin Snider

Reputation: 699

You need to adjust a few things to get it to work.

First thing is your div sidebar to the class stick

<div id="sidebar" class="sticky fixed">

Once you've done that then simply modify the CSS for #sidebar line 22 style.css your saying 1000px but really 

#sidebar {
min-height: 50%;
max-height: 95%;
}

This makes it work on my side. Also I might be wrong and you might not need to do the DIV so try the CSS first then try the DIV and the CSS if just the CSS doesn't fix it. Hope this helps you.

Upvotes: 1

Jerreck
Jerreck

Reputation: 3010

I believe it's because you have the inner-scroll div set to height:100%. I changed it to height: 90% - the button is now visible, and your content is still scrollable. I don't know why setting it to height 100% would knock out your button, though.

Upvotes: 3

Related Questions