Нет нижнего отступа при использовании дисплея: сетка и прокрутка - PullRequest
Новая
       14

Нет нижнего отступа при использовании дисплея: сетка и прокрутка

0 голосов
/ 04 февраля 2020

У меня есть контейнер div, в котором есть некоторые отступы, display: grid и overflow: auto. Когда высота дочернего элемента div больше родительского и появляется полоса прокрутки, она прокручивается так, что нижнего отступа нет.

Вот Fiddler . 

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.child {
    height: 500px;
    background: #000;
}
<div class="container">
    <div class="child"></div>
</div>

Однако, если контейнер сделан не только display: grid, при прокрутке вниз появляется нижний отступ.

Это ожидаемое поведение элемента display: grid? Если так, то почему? Как правильно восстановить нижнюю прокладку, предпочтительно только с CSS?

1 Ответ

1 голос
/ 04 февраля 2020

Не уверен, является ли это ожидаемым результатом или ошибкой, но обходной путь должен рассмотреть дополнительный элемент (используя псевдоэлемент), чтобы восстановить заполнение: 

.container {
    background: red;
    display: grid;
    height: 300px;
    padding: 3em;
    overflow: auto;
    width: 300px;
}

.container:after {
  content:"";
  height:3em;
}

.child {
    height: 500px;
    background: #000;
}
<div class="container">
    <div class="child"></div>
</div>
...