Overflow: scroll not working in absolute positioned div with parent overflow: hidden

Question

I'm having a problem.

My body has overflow: hidden;

The parent div has a postion: absolute; and overflow-y: scroll;

And the div with text is just a normal div.

But because the overflow: hidden; cuts off the bottom part of my absolute div, the scroll won't go all the way down.

I've made a jsfiddle to show what I mean: http://jsfiddle.net/AKL35/342/

 <body style="overflow: hidden;">
      <div style="position: absolute; overflow-y: scroll">
          <div>text</div>
      </div>
</body>

If anyone can help me, please answer. Thanks

The way I see your issue is that you want to see the bottom of an element but at the same time you tell to its container to hide what's beyond its limits... Am I right or I missed something? — Cholesterol
– Cholesterol, Commented Nov 8, 2013 at 18:41

Tim C · Accepted Answer · 2013-11-08 18:36:55Z

2

Applying overflow: hidden to the body will cause any content that falls out of the window to be unaccessible. There's many reasons not to do this! The only way to be sure all of your content will be visible would be to ensure that all of the content fits within the window - which means you'll need to know the window's dimensions, and dynamically modify the content to fit within those dimensions.

In your example, the iframe height is 644px, but you set div.sidebar to 800px of height. So, the last 156px of content is unreachable, as it exits the window, and the body is set to hide overflow. Setting div.sidebar to 550px allows your content to look the way you are expecting. If you insist on keeping the body overflow hidden, you'll need to discover the window size, and set the div.sidebar height to something less than the window's height.

answered Nov 8, 2013 at 18:36

Tim C

6355 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Colinch Over a year ago

Thanks for your anwser, I needed the overflow: hidden; because you should not be able to scroll in the page and the body height should be 100%.. If I remove the overflow hidden, the body height will be "100%" but it wont actually fill 100% of the screen.. I've edited the fiddle so i can show you jsfiddle.net/AKL35/345 If I remove the overflow: hidden, the div with the background image won't be the full 100%, but I see the scrollable div will be 100% height. Sorry for my english.

Tim C Over a year ago

The end result is that the div with the content you wish to be scrollable cannot exceed the dimensions of the window itself. If you wish to keep the overflow: hidden on the body, you must ensure that the dimensions of the body are greater than the div which holds the content.

Colinch Over a year ago

Is there another way than setting the body height to 100%? Because when doing that, it will only set the height to the size of the view.

Tim C Over a year ago

I would imagine you would need to set the body height to 100% in CSS, and use JS to dynamically set the height of your content div to something less than the body height on load. I don't think there's a way to do what you're looking for just with CSS, as the height of the content window depends on the height of the viewer's window.

Collectives™ on Stack Overflow

Overflow: scroll not working in absolute positioned div with parent overflow: hidden

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related