A Clever Sticky Footer Technique

When it comes to "sticky footer", most people nowadays think of position: sticky : in the context of the parent element scrolling, the footer element is fixed on the screen.

But this is not the focus of this article. The concept of "sticky footer" appeared earlier than position: sticky , and its meaning was slightly different. The idea is: Even if the page content is not enough to push it to the bottom, it will stick to the bottom of the screen. But if there is enough content, it will be happy to be pushed below.

We have introduced five implementation methods in the past, including some modern technologies such as calc() , Flexbox, and CSS Grid.

Now, the sixth method is on the stage! Reader Sílvio Rosa proposed the following method:

(It is best to view on a medium-sized desktop screen, as the sticky footer is mostly most effective at this screen size.)

The code is very concise:

 html, body { height: 100%;}

body > footer {
  position: sticky;
  top: 100vh;
}

One thing I appreciate about it is that it doesn't require any special extra wrappers to non-footer content.

It is also slightly puzzling. When I see top: 100vh; I guess this won't work because it pushes the footer outside the visual area. But that's exactly the cleverness. Regardless of the footer size (no magic numbers required), it does so, and then the sticky positioning "sucks it back" to adhere to the bottom edge. But it never overlaps with content, so it's happy to be pushed under content, which is the core principle of sticky footer pattern.

The above is the detailed content of A Clever Sticky Footer Technique. For more information, please follow other related articles on the PHP Chinese website!