0

I have a cart div for my webshop that sticks to the screen when you scroll down. I'm using the solution from this page - the answer that has the most vote up's, not the accepted answer: How can I make a div stick to the top of the screen once it's been scrolled to?

When the visitor adds many items, the cart gets taller than the browser window, and some items disappear below the browser. I want to add a scroll bar to the div using overflow-y: scroll, but the problem is that, even if the div is taller than the screen, the browser still thinks the user can see the whole div, so the scroll bar doesn't get enabled.

Can I somehow make the div understand that it shouldn't grow beyond the screen, and activate the scroll bar instead?

Thanks!

Community
  • 1
  • 1
Marcus Edensky
  • 924
  • 3
  • 13
  • 33

2 Answers2

0

You could possibly use max-height in conjuction with media queries based on screen height?

Chris
  • 453
  • 3
  • 15
0

As per my understanding max-height will work for this kind of module.

check http://jsfiddle.net/kundansankhe/mch22264/1/

html, body {
            height:100%;
    }
.test {
            position:fixed;
            top:0;
            overflow-y:auto;
            border:1px solid red;
            width:150px;
            max-height:100%;
        }

to occupi scroll-bar space, you can use overflow-y:scroll, so it will occupied scroll-bar space and will enable when content goes larger than screen height.

check updated link http://jsfiddle.net/kundansankhe/mch22264/1/

Kundan Sankhe
  • 224
  • 1
  • 11
  • Very clever, using 100% height at the body! We're getting quite close to exactly what I wanted, but the problem is the following: The scroll bar only appears when the div sticks to the screen - before that, the scroll bar is disabled. – Marcus Edensky Aug 19 '14 at 17:26
  • to enable scroll-bar, you can use overflow-y:scroll, so it will occupied scroll-bar space and will enable when content goes larger than screen height. – Kundan Sankhe Aug 20 '14 at 14:56