No padding when using overflow: auto

Question

I can't get padding-bottom to work when I use overflow-y: auto on a box.

HTML:

<div id="container">
    <div id="some_info"></div>
</div>

CSS:

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
}

Fiddle.

EDIT: I use Firefox

Solution 1

One more solution without extra DIVs.

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

Working in FF, Chrome, IE8-10.

Solution 2

I'm late to the party, but I thought it was worth adding a different solution that addresses some of the concerns raised above.

I came here because of exactly the kind of situation that @Philip raised in response to Alexandre Lavoie's solution: I have dynamically generated content inside the container, so I can't just apply styling to a specific div name like #some_info.

Happily, there's a simple solution for browsers that support CSS3: instead of applying bottom padding to the container, apply a bottom margin to the last child element inside the container.

#container > :last-child {
    margin-bottom: 3em;
}

As long as the last child element in the container div is a block-level element, this should do the trick.

DEMO: http://jsfiddle.net/rwgZu/240/

P.S. If Firefox's failure to scroll to the bottom of the padding is indeed a bug (as suggested by @Kyle), it still hasn't been fixed as of Firefox 47.0. Frustrating! Internet Explorer 11.0.9600.17843 exhibits the same behavior. (Google Chrome, in contrast, shows the bottom padding as expected.)

Solution 3

The solutions above were not working for my needs, and I think I stumbled on a simple solution.

If your container and overflowing content share the same background color, you can add a top and bottom border with the color matching the background color. To create equal padding all around, set the border width equal to the left and right padding of the container.

Link to modified version of OP's fiddle: http://jsfiddle.net/dennisoneil/rwgZu/508/

A simple example below.

Note: Stack Overflow puts the snippet results into an overflow scroll, which makes it a little harder to see what's going on. The fiddle may be your best preview option.

#container {
  background: #ccc;
  overflow-y: scroll;
  height: 190px;
  padding: 0 20px;
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
}
#overflowing {
  background: #ccc;
}

<div id="container">
  <div id="overflowing">
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>    
  </div>
</div>

Solution 4

Here is a possible approach that is working perfectly :

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}

Solution 5

For those who are looking for a simple solution and can change the DOM, put the overflow on the outer element and the padding on the inner element.

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll__inner {
    padding: 3em;
}

In the example from the original question, it would look like this:

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
    padding: 3em;
    box-sizing: border-box; /* only needed if wanting padding to not be added to height */
}

Note the use of box-sizing: border-box here, which is only needed as the OP has a hardcoded height (generally bad practice but could be needed in edge cases), so adding this border-box enables the 3em padding to not increase the height, but pad inside the 900px.

A final note, I'd advise avoiding ID's for styling, mostly due to their extremely high specificity, see this post for more info on that.

View more solutions

Comments

[Philip]

Thanks, Yeah, that's a solution, but let's say that #some_info is dynamic information and not always tagged as #some_info...

[Alexandre Lavoie]

It depends on the content of course, you can also keep an inner div.

[sergio]

This works because there's no content. When you add content, it overlaps everything in there, even the padding! Any border, margin or other even container without content is collapsed inside the scrolling div (at least in chrome 43)

[alejnavab]

Doesn't work if you use height: 100vh, which is my case.

[Nick]

Any way to make it work for the right side? In Firefox the horizontal scroll ends when the content is right on the edge of the box, and it ignores extra padding.

[Ethan]

If you wouldn't mind explaining, why the 50px? Is this value specific to the css in the question or could it work for anyone?

[isHristov]

@Booligoosh, the 50px is the size for the "padding". To be more accurate, this should be 3em to reflect the example within the question.

[Ethan]

@isHristov so as I understand it 50px is just a demo value?

[isHristov]

@Booligoosh, that is correct. You can set any value you want and that will be the "padding".

[kol]

This works only if you remove the bottom padding from #container, otherwise you get a doubled bottom padding in Chrome.

[Son Le]

using border with matching background color works best for me

[kevlarr]

Yep, still looks like an open bug: bugzilla.mozilla.org/show_bug.cgi?id=748518

[Aseem]

This did not work for me. I tried it in the same fiddle provided in the question

[TetraDev]

Does not work on FireFox 89.0.2 - still doesn't respect bottom-margin

[TetraDev]

Does not work on FireFox 89.0.2 - still doesn't respect bottom-margin.

[TetraDev]

This kind of works, but it ends up pushing the scrollbar up from the bottom by the amount of the border thickness. So it looks weird.