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:

Answer 1

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;
}

  

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content

    This is content