Firefox ignores padding when using overflow:scroll
When using overflow: scroll
combined with padding: /* ... */
CSS property, the padding at the bottom of the element is missing in Firefox. (But works in Chrome and Safari.)
.container {
height: 100px;
padding: 50px;
border: solid 1px red;
overflow-y: scroll;
}
ul,
li {
padding: 0;
margin: 0;
}
<div class="container">
<ul>
<li>padding above first line in every Browser</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>no padding after last line in Firefox</li>
</ul>
</div>
View Demo
Did I missed something or is there any kind of work around for this issue?
Notice: the demo doesn't use any library for normalizing, but I tried normalize.css
too, but without success.
After a bit of brainstorming with fellow developers, although not very graceful, this pure css solution works:
.container:after {
content: "";
height: 50px;
display: block;
}
Fiddle
in Firefox padding-bottom is ignored with overflow:auto or overflow:scroll, see the documentation
https://bugzilla.mozilla.org/show_bug.cgi?id=748518
still if you want to work around your example to achieve the desired result then see the fiddle: https://jsfiddle.net/nileshmahaja/4vuaf4o3/1/
Modified 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;
}
I'm not a fan of creating additional DOM elements to work around displaying issues, however it seems to help to split up the element into two elements like:
<div class="container">
<div class="container-inner">
<!-- long content -->
</div>
</div>
and then assigning overflow: scroll
to the outer element and add padding: /* ... */
to the inner element.
I ended up achieving the same effect (space between last item in a scrollable container and the end of container) in a slightly different way:
.container :last-child {
margin-bottom: 50px;
}
Perhaps there are technical differences between what's really going on, but I find this pretty effective.
Here's a Fiddle