• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

virusword.com-Wordpress

Learn Wordpress

  • Home
  • WordPress Shop
    • Fotopress
    • SEO Tool Kit
    • Social Contact
    • Tag Machine 2
    • Video Profits
  • Latest News
  • WordPress
    • Plugins
    • Themes
    • Tutorials
    • Videos
    • Woocommerce
  • About Us
  • Contact Us
    • Terms of Service
    • Privacy Policy
  • Show Search
Hide Search
Home/Plugins/A Clever Sticky Footer Technique

A Clever Sticky Footer Technique

Upon hearing “sticky footer” these days, I would think most people imagine a position: sticky situation where a footer element appears fixed on the screen while in the scrolling context of some parent element.

That’s not quite what I’m talking about here. “Sticky footers” were a UI concept before position: sticky existed and they mean something slightly different. The idea is that they stick to the bottom of the screen, even when the content of the page isn’t enough to push them there. But if there is enough content, they are happily pushed down.

We covered five ways to do this in years past, which included techniques that are somewhat modern, including calc(), flexbox, and CSS Grid.

Enter a sixth challenger! Reader Sílvio Rosa wrote in with this:

(Probably easiest to check out on a medium-sized desktop screen, which is kinda where sticky footers matter the most anyway.)

It’s pretty much just this:

html, body  height: 100%;

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

What I like about it is that it doesn’t require any special extra wrapper for non-footer content.

It’s also a little brain-bending. When I see top: 100vh; I think well that won’t work because it will push the footer outside the viewable area. But that’s the clever bit. It will do that no matter how big the footer is (no magic numbers), and then the sticky positioning will “suck it back up” to stick along the bottom edge. But it will never overlap content, so it’s happy to be pushed down below content, which is a core tenant of the sticky footer pattern.

For more updates check below links and stay updated with News AKMI.
Life and style || E Entertainment || Automotive News || Science News || Tech News || Lifetime Fitness || Giant Bikes

Source

Source link

Written by:
Abdul Wahid
Published on:
November 17, 2021

Categories: Plugins

Primary Sidebar

Wordpress

  • Latest News (266)
  • Plugins (304)
  • Themes (308)
  • Tutorials (388)
  • Videos (791)
  • Woocommerce (395)

Recent Articles

Bricks Builder Tutorial – Page and Posts and WooCommerce – WordPress Theme – Speed Optimisation

After our first look at Bricks a few weeks ago, …

Continue Reading about Bricks Builder Tutorial – Page and Posts and WooCommerce – WordPress Theme – Speed Optimisation

Paper Airplane Competition (Photo Gallery) – RMU Sentry Media

Armstrong Tunnel to close Saturday morning …

Continue Reading about Paper Airplane Competition (Photo Gallery) – RMU Sentry Media

Search our site

Explore more

Get our Wordpress Guide Get Plugins Get Connected

Footer

VirusWord by Promaps, Inc.

Barnes Place
Colombo 7, Western 00700

Copyright © 2023 · Promaps, Inc.

Keep In Touch

  • Email
  • Facebook
  • Instagram
  • Pinterest
  • Twitter