Upon listening to “sticky footer” nowadays, I might suppose most individuals think about a place: sticky state of affairs the place a footer ingredient seems fastened on the display whereas within the scrolling context of some dad or mum ingredient.
That’s not fairly what I’m speaking about right here. “Sticky footers” have been a UI idea earlier than place: sticky existed they usually imply one thing barely completely different. The concept is that they keep on with the underside of the display, even when the content material of the web page isn’t sufficient to push them there. But when there may be sufficient content material, they’re fortunately pushed down.
We coated 5 methods to do that in years previous, which included strategies which can be considerably fashionable, together with calc(), flexbox, and CSS Grid.
Enter a sixth challenger! Reader Sílvio Rosa wrote in with this:
(In all probability best to take a look at on a medium-sized desktop display, which is kinda the place sticky footers matter essentially the most anyway.)
It’s just about simply this:
html, physique { peak: 100%;}
physique > footer {
place: sticky;
prime: 100vh;
}
What I like about it’s that it doesn’t require any particular further wrapper for non-footer content material.
It’s additionally somewhat brain-bending. After I see prime: 100vh; I believe effectively that received’t work as a result of it’s going to push the footer exterior the viewable space. However that’s the intelligent bit. It’s going to do this irrespective of how huge the footer is (no magic numbers), after which the sticky positioning will “suck it again up” to stay alongside the underside edge. However it’s going to by no means overlap content material, so it’s comfortable to be pushed down beneath content material, which is a core tenant of the sticky footer sample.
The publish A Intelligent Sticky Footer Approach appeared first on CSS-Tips. You’ll be able to assist CSS-Tips by being an MVP Supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!