To achieve a sticky footer, use Flexbox or Grid layout. 1. When using Flexbox, set the container to flex and set flex-direction: column to make the main content area expandable to fill the space; 2. When using Grid, define the row height through grid-template-rows to allow the main content to occupy the remaining space; 3. Pay attention to the mobile browser viewport problem and avoid directly using vh units or dynamically calculating the height to ensure the layout is displayed correctly. These methods can effectively achieve sticky footer effect.

A sticky footer sticks to the bottom of the viewport when the content is short, but moves down naturally when the page content is taller than the screen. It's a common UI pattern and easier to pull off now with modern CSS tools like Flexbox and Grid.

Use Flexbox for a simple, reliable layout

Flexbox was designed for one-dimensional layouts, making it perfect for aligning a footer to the bottom of the screen while letting the main content expand in between.

Here's how you can do it:

• Set the container (often body ) to display: flex
• Use flex-direction: column
• Make the main content area grow to fill available space

 body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

With this setup, your footer will stay at the bottom of the screen even if there's not much content — and scroll away when there's more.

Consider CSS Grid for more control

If you want more precise control over your layout structure, CSS Grid is another solid option. It works well too:

 body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

In this case:

• The header takes up auto height
• The main content ( 1fr ) fills the remaining space
• The footer sits at the bottom

This method is just as effective as Flexbox and might be better suited if you're already using Grid elsewhere in your layout.

Watch out for mobile browser quirks

One thing that often trips people up: mobile browsers have dynamic address bars that affect the actual viewport height. Using 100vh directly on elements can cause unexpected behavior — like cutting off part of your footer when the address bar hides or shows.

To avoid that:

• Avoid setting fixed heights using vh units on containers that include the footer
• Or use window.innerHeight via JavaScript to dynamically calculate height if needed

It's a subtle issue, but worth checking on real devices if your site needs pixel-perfect layout behavior.

Basically that's it. Stick a footer to the bottom with Flexbox or Grid, keep an eye on mobile viewports, and you're good to go.

The above is the detailed content of Crafting a sticky footer layout using modern CSS. For more information, please follow other related articles on the PHP Chinese website!