CSS scroll-padding-bottom Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS scroll-padding-bottom insetting the scrollport at the physical bottom edge
Definition

Definition and Usage

The scroll-padding-bottom property insets the scrollport at the physical bottom edge. Snap and scroll targets stop inside that inset instead of flush against the bottom.

It is a longhand of scroll-padding. For a logical alternative that follows writing mode, use scroll-padding-block-end. It is not inherited.

Baseline Widely available.

Not deprecated. Physical longhand for the bottom scrollport inset. Widely available since April 2021 (Safari 14.1+). Works on any scroll container, with or without snap. Safari 11–14 had partial support.

Syntax

CSS Syntax

syntax.css
scroll-padding-bottom: auto | <length-percentage> | initial | inherit;

Percentages are relative to the scrollport height.

Values

Property Values

ValueDescriptionTry it
autoDefault. Browser chooses (usually 0px)Try it
<length>Fixed inset such as 48px or 3remTry it
<percentage>Percent of the scrollport heightTry it
initialResets to autoTry it
inheritTakes the parent’s scroll-padding-bottomTry it
Approach

How to Use scroll-padding-bottom

Set it on the scroll container when content should clear the bottom edge.

  1. Create a scroll container (overflow: auto or the document).
  2. Optionally snap with scroll-snap-type and scroll-snap-align: end.
  3. Set scroll-padding-bottom to match a footer height or breathing room.
  4. Scroll — end-aligned targets stop above the inset.
PieceRequired?Role
Scroll containerYesWhere the property is declared
scroll-padding-bottomYesInsets the physical bottom of the scrollport
scroll-snap-align: endHelpfulMakes the bottom inset easy to see
Footer / chrome heightCommonMatch the inset to fixed bottom UI
Try it

Live Preview

Scroll the box. Panels snap to the end. Change the bottom inset and watch the gap at the bottom.

The amber band marks the physical bottom inset.

Scroll box
1
2
3

scroll-padding-bottom: 48px — end snap stops above the bottom band

Code

CSS Examples

Each snippet focuses on scroll-padding-bottom. Use Try It Yourself for a live editor.

Example 1 — Length Inset at the Bottom

Reserve space at the bottom so snapped panels clear a footer band.

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-bottom: 48px;
  }

  .panel {
    height: 160px;
    scroll-snap-align: end;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Create a scroller. Overflow defines the scrollport.
  2. Snap vertically. y mandatory locks panels on the vertical axis.
  3. Align to the end. scroll-snap-align: end aims at the bottom edge.
  4. Inset that edge. 48px keeps snapped panels above the bottom band.

Example 2 — Percentage of the Scrollport

Size the bottom inset relative to the scroller height.

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-bottom: 20%;
  }

  .panel {
    height: 160px;
    scroll-snap-align: end;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Use a percentage. 20% is relative to the scrollport height.
  2. Scales with the box. Taller scrollers get a larger bottom inset.
  3. Always physical. Unlike scroll-padding-block-end, this stays at the bottom in every writing mode.
  4. Prefer lengths for fixed footers. Match pixel chrome with px or rem.

Example 3 — Auto (Default)

With auto, the browser usually applies no extra bottom inset.

CSS
<style>
  .scroller {
    height: 200px;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scroll-padding-bottom: auto;
  }

  .panel {
    height: 160px;
    scroll-snap-align: end;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>
Try It Yourself

How It Works

  1. Initial value. Omitting the property is the same as auto.
  2. Usually zero. End-aligned panels snap flush to the bottom edge.
  3. UA freedom. A browser may pick a non-zero offset when it helps readability.
  4. Override when needed. Set a length or percentage for predictable footer clearance.

Edge Cases & Pitfalls

Bottom insets are easy to miss if panels snap to the top edge.

align

Use end snap to see the effect

With scroll-snap-align: start, a bottom inset may look unused. Prefer end (or scroll to the last panel) when testing.

physical

Always the bottom, never logical

In vertical writing-mode, the block-end edge moves. Prefer scroll-padding-block-end when flow can change.

target

Set it on the scroller

Targets use scroll-margin-bottom. The container uses scroll-padding-bottom.

layout

It is not padding-bottom

Layout does not shift. Only scroll and snap aiming change inside the scrollport.

Compatibility

Browser Support

scroll-padding-bottom is a browser CSS property. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since Apr 2021

scroll-padding-bottom

Chrome 69+, Edge 79+, Firefox 68+, Safari 14.1+, Opera 56+, Samsung Internet 10.1+. Safari 11–14 had partial support. Internet Explorer has no support.

97% Global reach
Google Chrome 69+
Full support
Mozilla Firefox 68+
Full support
Apple Safari 14.1+
Full support
Microsoft Edge 79+
Full support
Opera 56+
Full support
Samsung Internet 10.1+
Full support
Internet Explorer No support
Not supported
scroll-padding-bottom Widely supported

Bottom line: Safe for modern sites. Prefer scroll-padding-block-end when writing-mode may change. Not a server runtime API.

Remember

Key Takeaways

  • Role: inset the scrollport at the physical bottom only.
  • Values: auto, length, or percentage.
  • Initial value: auto. Not inherited.
  • Tip: pair with scroll-snap-align: end to see the bottom inset clearly.

One line: scroll-padding-bottom reserves space at the physical bottom of the scrollport.

Frequently Asked Questions

It insets the scrollport at the physical bottom edge. Snap and scroll targets stop above that inset instead of flush against the bottom.
The initial value is auto. Browsers usually treat that like 0px unless they choose another offset.
scroll-padding-bottom is always the physical bottom. scroll-padding-block-end follows the block flow, so it adapts when writing-mode is vertical.
scroll-padding is the shorthand for all four sides. This longhand sets only the bottom.
Use it for fixed footers, bottom chrome, or extra space when panels snap to the bottom edge of a scroller.
It is Baseline and widely available since April 2021: Chrome 69+, Edge 79+, Firefox 68+, Safari 14.1+, Opera 56+. Safari 11–14 had partial support. Internet Explorer does not support it. It is a browser CSS property, not a Node.js feature.

Next: scroll-padding-inline

Learn the logical shorthand for both inline-start and inline-end insets.

scroll-padding-inline tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

5 people found this page helpful

CSS scroll-padding-block-start Property CSS scroll-padding-inline Property