При использовании overflow: scroll в сочетании с свойством CSS padding: /* ... */ в Firefox отсутствует дополнение в нижней части элемента. (Но работает в Chrome и Safari.)
Я что-то пропустил или есть какая-то работа для этой проблемы?
Обратите внимание: демон не использует какую-либо библиотеку для нормализации, но я тоже пробовал normalize.css, но безуспешно.
в Firefox padding-bottom игнорируется с переполнением: auto или переполнение: прокрутка, см. документацию
еще, если вы хотите обойти свой пример, чтобы достичь желаемого результата, а затем посмотрите скрипт: https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/
Измененный CSS
.container {
height: 200px;
padding: 50px 50px 0;
border: solid 1px red;
overflow-y:auto;
display:block;
}
ul{
padding:0 0 50px;
display:block
}
li {
padding: 0;
margin: 0;
}
После небольшого мозгового штурма с другими разработчиками, хотя и не очень изящного, это чистое решение CSS работает:
.container:after {
content: "";
height: 50px;
display: block;
}
Я не поклонник создания дополнительных элементов DOM для работы с отображением проблем, однако, похоже, он помогает разбить элемент на два элемента, например:
<div class="container">
<div class="container-inner">
<!-- long content -->
</div>
</div>
а затем присвоить overflow: scroll внешнему элементу и добавить padding: /* ... */ во внутренний элемент.
Я закончил тем же эффектом (пробел между последним элементом в прокручиваемом контейнере и концом контейнера) несколько иначе:
.container :last-child {
margin-bottom: 50px;
}
Возможно, существуют технические различия между тем, что происходит на самом деле, но я считаю это довольно эффективным.
Здесь Fiddle
Вы не можете использовать ответ Артуриона во всех случаях, например, после input или элемента img. Вместо этого вы можете создать элемент распорки, такой как div и поместить его в конец прокручиваемого содержимого:
.spacer-1rem {
content: "";
height: 1rem;
display: block;
}
Хотя то, что сработало для меня, было похоже на другие предложенные ответы, эти другие ответы не спомогли мне.
То, что сработало, было следующим:
.container::after {
content: '';
display: block;
padding: calc(var(--desiredPadding) / 2);
}
что означает:
padding на псевдоэлементе. Использование padding-bottom не сработало, как и heightdisplay: block