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

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.

Answer 2

One more solution without extra DIVs.

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

Working in FF, Chrome, IE8-10.

Answer 3

It's not only with bottom padding. Right padding/border/spacing is also ignored (you can't see it in your example because it has no content, and the width is not scrolling)

All the answers above fail in chrome 43, generating up to 3 scrollbars! or if the content overflows #some_info.

Example: http://jsfiddle.net/LwujL3ad/

If it worked for you, it's probably because the content was not as wide as the scrolling element, or fixed sized.

The right solution is:

Set #some info to display:table, and add padding or border to it, not to the scrolling container.

#container {
    overflow: scroll;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0;
}

    #some_info {
    display:table;
    border: solid 3em red;
    height: 900px;
    background: #000;
    margin-bottom:3em;
    color: white;
}

DEMO: http://jsfiddle.net/juh7802x/

The only element that doesn't fail, and respects ANY border and padding you add in there as separator is a TABLE.

I tried, and no matter if it's the next direct child or it's nested many items deep, any non-content styling will NOT expand to wrap the content, and will stay 100% width of the parent. Which is nonsense, because having content BIGGER than the parent is EXACTLY the scenario in which a scrolling div is required!

For a dynamic solution (both the container and the content) set the container of the elements inside the scrolling container to display:table.

Answer 4

I think @-moz-document url-prefix() is what you need.

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

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

@-moz-document url-prefix() {
  #container > :last-child {
    margin-bottom: 3em;
  }
}

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

Answer 5

Style the parent div normally and make the inner div do what you want it to do.

Remove overflow-x and overflow on #container, change height to 100% and add overflow-y:scroll; on #some_info

#container {
    padding: 3em;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 100%;
    background: #000;
    overflow-y:scroll;
    width:100%;
}

Working Demo: http://jsfiddle.net/9yuohxuh/

Answer 6

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