Нижняя прокладка, не работающая над элементом переполнения в нехромовых браузерах

Если вы посмотрите на эту скрипту в Chrome: http://jsfiddle.net/up4Fa/

Вы увидите переполненный элемент с 20px отступов внутри него! Все отлично и работает как ожидалось.

Однако, если вы запускаете тот же тест в IE9 или Firefox, текст внизу касается края контейнера, а нижнее дополнение игнорируется...

Если я сделаю прописку на внутреннем div, проблема будет, но я бы скорее исправлю ее одним div и не могу понять, почему у BOTH firefox и IE есть проблемы, но не у Chrome?

EDIT: текст не является причиной, если кто-то задавался вопросом! Он будет делать то же самое с красным полем, если я удалю текст.

Спасибо

Ответ 1

Похоже, что когда вы устанавливаете размеры контейнера div косвенно путем позиционирования, эти браузеры не могут предсказать высоту div и правильно отрегулировать заполнение. Быстрый и грязный трюк, чтобы исправить это, - удалить нижнюю прокладку контейнера:

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

И добавьте нижнее поле к последнему ребенку:

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

http://jsfiddle.net/xa9qF/

Ответ 2

Лучший подход, на мой взгляд, использует селектор :after

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

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

Ответ 3

Это мое исправление, когда я использовал CSS сетки:

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