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

Answer 1

One more solution without extra DIVs.

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

Working in FF, Chrome, IE8-10.

Answer 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.)