Why Does Bottom Padding Disappear in Firefox When Using Overflow: Scroll?

Padding Ignored in Firefox with Overflow: Scroll

In certain scenarios involving CSS's overflow: scroll property and padding, Firefox exhibits a peculiar behavior where the padding at the bottom of an element vanishes. This is in contrast to the expected functionality observed in browsers like Chrome and Safari.

The issue arises when you combine the overflow: scroll property, which enables vertical scrolling for the element, with the padding property, which defines the spacing between the element's content and its border. In Firefox, the padding at the bottom of the element disappears, leaving visible content extending beyond the edge of the defined padding area.

To illustrate the issue, consider the following CSS code:

<code class="css">.container {
  height: 100px;
  padding: 50px;
  border: solid 1px red;
  overflow-y: scroll;
}

ul,
li {
  padding: 0;
  margin: 0;
}</code>

When this code is applied to an HTML structure like the one below, you will notice the missing padding at the bottom of the element in Firefox, while it appears as expected in other browsers:

<code class="html"><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></code>

[View Demo](demo URL)

To address this issue, a straightforward pure CSS solution can be employed:

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

This CSS code adds an element after the container element with a fixed height of 50px (equivalent to the bottom padding). By inserting this element, you create a visible space that makes up for the missing padding, effectively resolving the problem.

It's important to note that this solution, while functional, is not an ideal or elegant fix. However, it provides a workaround until a more refined solution becomes available.

The above is the detailed content of Why Does Bottom Padding Disappear in Firefox When Using Overflow: Scroll?. For more information, please follow other related articles on the PHP Chinese website!