Bottom padding not working on overflow element in non-chrome browsers

Question

If you take a look at this fiddle in Chrome: http://jsfiddle.net/up4Fa/

You will see an overflowing element that has 20px of padding inside it! All fine and working as expected.

However if you run the same test in IE9 or Firefox the text at the bottom touches the edge of the container and the bottom padding is being ignored...

If I do the padding on an inner div it will the issue, BUT I'd much rather fix it with one div and can't understand why BOTH firefox and IE have problems but not Chrome?

EDIT: The text isn't the reason in case anyone was wondering! It will do the same with the red box if I remove the text.

Thanks

This has puzzled me too, although adding margin-bottom: 20px; to the red element works.... — Rick Donohoe, May 23 '12 at 15:14
I reported this incompatibility upstream to the CSS working group: https://github.com/w3c/csswg-drafts/issues/129#issue-156060453 — Ben Creasy, Sep 26 '16 at 16:40
@BenCreasy Is this still an issue in some browsers? Not looked at this for a few years. — Cameron, Sep 26 '16 at 16:43
Yes, it's still an issue. You can read up about it at that Github issue. — Ben Creasy, Sep 26 '16 at 17:07
Possible duplicate of [Firefox ignores padding when using overflow:scroll](https://stackoverflow.com/questions/29986977/firefox-ignores-padding-when-using-overflowscroll) — Vic Seedoubleyew, Aug 19 '19 at 16:49
any update for the issue; is it not solved yet? and is this issue only happening for `padding-bottom` or `padding-right` as well? Because when I try the padding-right in Chrome ver. 92, it looks fine — Kevin Chandra, Aug 18 '21 at 17:30

score 20 · Accepted Answer · answered May 23 '12 at 15:20

20

It seems that as you are setting the dimensions of the container div indirectly by positioning, those browsers fail to predict the height of the div and render the padding properly. A quick and dirty trick to fix this is to remove the bottom padding of the container:

div.container {
    ...
    padding: 20px 20px 0 20px;
    ...
}

And add a bottom margin to it's last child:

div.container > *:last-child {
    margin-bottom: 20px;
}

http://jsfiddle.net/xa9qF/

answered May 23 '12 at 15:20

Esteban

874
8
13

1

Excellent fix! Still bummed that other browsers than Chrome can handle something as simple as this though... especially Firefox O_o – Cameron May 23 '12 at 15:40
I ended up with this same solution. Firefox and IE don't do padding-bottom properly on fixed height positioned elements, but Chrome works fine. The problem may be in combination with `border-box` . – elclanrs Nov 07 '13 at 22:38
Doesn't work if your container can end up not having any child, but directly text. For example if your container is a component in a framework like Angular, its content can be set to different values. If that value is not an element but directly text, this doesn't work – Vic Seedoubleyew Aug 19 '19 at 15:56
I used ```padding-bottom``` instead to make it work (Firefox 74) – philipeachille Apr 11 '20 at 17:41

score 4 · Answer 2 · answered Apr 23 '17 at 14:30

4

A best approach, in my opinion, is using :after selector

div.container:after{
    content:"";
    display:block;
    height:20px; /* Which is the padding of div.container */
}

http://jsfiddle.net/up4Fa/23/

answered Apr 23 '17 at 14:30

Andrei

160
2
14

Mi G · Answer 3 · 2018-12-17T21:35:25.247

1

This is my fix for when I was using CSS Grids:

/* Fix scrollbar removing padding-bottom */
@supports (-moz-appearance:none) {
  .container::after {
    content: "";
    height: 1px;
    margin: calc(var(--padding) - var(--gap));
  }
}

edited Dec 17 '18 at 21:35

answered Dec 17 '18 at 18:44

Mi G

146
2
3

score 0 · Answer 4 · answered Dec 16 '20 at 23:16

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.

.my-element {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

The trick to viewport units on mobile

Bottom padding not working on overflow element in non-chrome browsers

4 Answers4

Linked