Why Does Firefox Omit Padding at the Bottom of Elements with Overflow: Scroll?

Troubleshooting Firefox's Padding Omission with Overflow

When implementing both overflow: scroll and padding CSS properties, users may encounter an issue where Firefox suppresses the padding at the element's bottom, unlike browsers such as Chrome and Safari.

Problem Scenario:

`

<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>no padding after last line in Firefox</li>

`

In this snippet, the element has a height of 100px, a padding of 50px, a red border, and vertical scroll overflow. However, in Firefox, the padding at the bottom of the container is missing, creating an unexpected appearance.

Workaround:

While this issue may seem perplexing, a relatively simple pure CSS solution can resolve it:

<code class="css">.container:after {
    content: "";
    height: 50px;
    display: block;
}</code>

By adding this CSS rule, you insert an empty element with a height equal to the container's padding. This element serves as a placeholder, ensuring that the padding is consistently maintained even with scroll overflow.

Demonstration:

[Fiddle](https://jsfiddle.net/rdx8k4mz/) showcasing the workaround.

The above is the detailed content of Why Does Firefox Omit Padding at the Bottom of Elements with Overflow: Scroll?. For more information, please follow other related articles on the PHP Chinese website!