Bottom padding not working on overflow element in non-chrome browsers (original) (raw)

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

asked May 23, 2012 at 14:45

6

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, 2012 at 15:20

EstebanEsteban

8848 silver badges13 bronze badges

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, 2017 at 14:30

AndreiAndrei

1713 silver badges18 bronze badges

0

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

answered Dec 17, 2018 at 18:44

Mi GMi G

1562 silver badges3 bronze badges

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

answered Dec 16, 2020 at 23:16

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.