CSS Overflow: auto out of div boundaries

Question

I have a problem combining div boxes and the overflow: auto property for adding scrollbars if needed.

The problem is that I don't want the whole page to be scrollable, but just the content div, thus I added overflow: hidden to the body and overflow: auto to the content.

body
{
    padding: 0;
    margin: 0; 
    background-color: navy; 
    overflow: hidden; /** no scrollbar on whole page **/
    height: 100%;
}

#content
{
    background-color: green;
    overflow: auto; 
    height: 100%;
}

Nevertheless, I'm not able to see the end of the page, as the div increases its size beyond the viewable part of the website.

Please suggest how to solve this problem and only keep the content div scrollable. I uploaded an example of my problem here: jsfiddle.net/3n7ay/

I can only get this to work with a fixed header height, is there no solution for dynamic header size? It's hard for me to believe...

Thanks & Regards

nickspiel · Accepted Answer · 2014-03-12 10:51:07Z

1

I think you looking for overflow-y: scroll; instead?

See fiddle: http://jsfiddle.net/3n7ay/5/

answered Mar 12, 2014 at 10:51

nickspiel

5,7506 gold badges35 silver badges49 bronze badges

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

2 Comments

must_improve Over a year ago

This will not solve the problem unfortunately. If I add overflow-y to the body, it will display the scrollbar for the whole body, which is unwanted. I only need the scrollbar on the content-div.

nickspiel Over a year ago

So put overflow-y: scroll on the content-div then. As I have in my fiddle.

Fabrizio Calderan · Accepted Answer · 2014-03-12 10:55:00Z

0

If you set height: 100% to the content element and you have also an header in your viewport this will make the former not entirely visible inside the viewport itself.

So the height must be defined as 100% - <header height>, either via javascript (if you need to support older browser) or via CSS3 calc() function, e.g.

#content {   
   height: -webkit-calc(100% - <height of header>px);
   height: -moz-calc(100% - <height of header>px);
   height: calc(100% - <height of header>px);
}

answered Mar 12, 2014 at 10:55

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

2 Comments

must_improve Over a year ago

This sounds quite promising. What is the solution if I have a header that's dynamically sized depending on the size of content inside? This is exactly the case here.

Miaonster Over a year ago

@user3410218 If calc is promising, what about flex box?

Miaonster · Accepted Answer · 2014-03-13 10:41:27Z

0

Try flex box, if you don't concern about Ie8 and Ie9. You can see the compatibility situation in caniuse.com: flexbox

Make container a flex box:

#container {
    background-color: yellow;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

Flex the content:

#content {
    background-color: green;
    overflow: auto;
    height: 100%;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

See fiddle: http://jsfiddle.net/r4JUk/4/

edited Mar 13, 2014 at 10:41

answered Mar 13, 2014 at 10:28

Miaonster

1,5222 gold badges18 silver badges34 bronze badges

Collectives™ on Stack Overflow

CSS Overflow: auto out of div boundaries

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related