css - applying padding to box with scroll, bottom-padding doesn't work

scroll-padding css
overflow scroll padding-right
css overflow padding
css scroll snap
css scrollbar position top and bottom
css scrollbar extra space
inline scroll css
css scroll offset

I can't get bottom-padding 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: http://jsfiddle.net/rwgZu/

EDIT: I use Firefox

One more solution without extra DIVs.

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

Working in FF, Chrome, IE8-10.

scroll-padding, scroll-padding is part of the CSS Scroll Snap Module. on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an auto; scroll-padding-bottom: <​length-percentage> | auto; This Pen doesn't use any external CSS resources. This element has a padding of 70px. The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). Note: Negative values are not allowed.

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

[css-overflow-3] Clarify padding-bottom in overflow content · Issue , frivoal changed the title Clarify padding-bottom in overflow content However, if the scroll container has block children, we just consider the border boxes of the to make inline content look better, and just didn't apply it generally). it does not implement the behavior introduced in CSS 2.1 and there is no  @litherum I thought it might be something like that; I'm glad to hear it's that simple, and I'll edit the issue accordingly. I echo @frivoal's question about whether the "don't include if if there's only block children" was done for compat (y'all were seeing pages suddenly sprout lots more scrollbars than intended), or if it was just happenstance (y'all added a hack to make inline content look

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

scroll-padding-bottom, The scroll-padding-bottom property defines offsets for the bottom of the optimal viewing region of the scrollport: the region used as the target  I’ve found that border-box sizing is pretty much required if you want to do a fixed size header and footer with scrolling content inset into the page (with overflow-y: scroll). It seems to be the only way to make the content and all its parents 100% high, with fixed top and bottom padding.

Demo

Hi now used to this css

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0; // add this line in your css
}

#some_info {
    height: 900px;
    background: #000;
    margin-bottom:3em; // add this line in your css
}

Demo

overflow:scroll and The Right Padding Problem, The browser won't add right padding when you scroll to the end padding on the top, left and bottom of the parent by adding margin to the  The padding-bottom property sets the bottom padding (space) of an element. Note: Negative values are not allowed. yes. Read about animatable Try it. JavaScript syntax: object .style.paddingBottom="50px" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property. #N#padding-bottom.

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>

CSS padding-bottom Property, Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to  The background-origin property specifies the origin position (the background positioning area) of a background image. Note: This property has no effect if background-attachment is "fixed". no. Read about animatable. JavaScript syntax: object .style.backgroundOrigin="content-box" Try it. Browser Support. The numbers in the table specify the

Flexbox and padding, From the GitHub issue [css-overflow-3] Clarify padding-bottom in with overflow:​auto/scroll because it extends in from the border-box rather than of the padding used on the flex container, because padding is applied all around the pseudo-​element. This Pen doesn't use any external CSS resources. The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not. no. Read about animatable. JavaScript syntax: object .style.boxSizing="border-box" Try it. Browser Support. The numbers in the table specify the first browser version that fully supports the property.

CSS, How to apply border inside a table ? How to Toggle an How to Create Shrink Header on Scroll using HTML, CSS and JavaScript ? Why are dashes How to display error without alert box using JavaScript ? Create a Search Bar The Scroll Padding bottom is an inbuilt property in Scroll Snap module. This property set  If it did, that would have to be factored into the negative margins, and having those two numbers not in sync doesn’t look quite as nice. There is negative top margins on footers This technique did not require a push element, but instead, required an extra wrapping element around the content in which to apply matching bottom padding to.

scrolling (overflow) and padding, When the parent box has horizontal padding and overflow:auto (or scroll), The overflowing content does not appear to have any 'space' at its right side. defined in the CSS specification), and may reasonably set equal to that right padding. But you shouldn't stop with scrolling and borders for your styles. You can apply a lot of other CSS styles to your iframe. This example uses CSS3 styles to give the iframe a shadow, rounded corners, and rotated it 20 degrees.

Comments
  • I see even padding (red) around all edges.
  • AHa, maybe it's just Firefox?
  • I confirm the problem in FF17
  • Wow, it's so nice to see everyone building on each other's answers is such a constructive way! This is really what the StackOverflow community is all about. This makes me very happy
  • W3C has to resolve this issue, hopefully they'll choose the behavior of Chrome! github.com/w3c/csswg-drafts/issues/129
  • 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.
  • 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?
  • @Booligoosh, the 50px is the size for the "padding". To be more accurate, this should be 3em to reflect the example within the question.
  • @isHristov so as I understand it 50px is just a demo value?
  • @Booligoosh, that is correct. You can set any value you want and that will be the "padding".
  • Thanks, Yeah, that's a solution, but let's say that #some_info is dynamic information and not always tagged as #some_info...
  • It depends on the content of course, you can also keep an inner div.
  • using border with matching background color works best for me
  • 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)
  • Doesn't work if you use height: 100vh, which is my case.