A fascinating new site called The Markup just launched. Tagline: Big Tech Is Watching You. We’re Watching Big Tech. Great work from Upstatement. The content looks amazing, but of course, around here we’re always interested in the design and tech as well. There is loads to adore, from the clean typography, interesting layout, and bold angled hover states on blocks, to the tasteful dots motif.
The footer is clever as well, in how it appears to slide out from underneath the content as you scroll to the bottom of the page. Let’s make it!
Here’s the trick:
- The main content area is at least
100vhtall. Most sites are anyway, but just to be safe. - The main content area has a solid background as well, which covers the footer we’re going to hide behind it.
- The footer comes after the main content area in the HTML, so to make sure the main content area sits on top, you’ll need a little relative positioning and z-index.
- The footer uses sticky positioning to place itself on the bottom.
That last one is the fanciest trick, and it’s actually fancier than The Markup does it. They use position: fixed; on the footer and a magic number margin-bottom on the main content to make it work. No magic numbers needed when going sticky.
The fact that that works so easily without magic numbers is pretty rad. Thanks to Stephen Shaw for the sticky trick! My first crack at this used fixed positioning and magic numbers, but it’s so much more usable without that.
Preethi showed us a super similar technique in 2018. The main different here is using a linear gradient on the body’s background, which is a nice workaround if applying a solid color is somehow limiting to the overall design.
Keyframers Video
Stephen did one up!
One weakness of this in it’s current form is that the footer will get cropped if it’s taller than 100vh.
Simply adding top: 0; should fix that, and cause it to fall back to a normal footer reveal in that situation.
Correct.
Are there any issues with
z-index: -1on footer instead of making main positioned?No. Better to use negative index to footer instead of global main block
If you have anything clickable (eg. links) in your footer then don’t use
z-index: -1as this puts the footer behind the document and while the content will be visible, you will not be able to click on anything in the footer. Instead usez-index: 1on your main content block and give itposition: relativeas per the article’s example.Why is this footer getting so much attention at the moment? I’ve seen this technique used many times before.. Is it because it’s done in a different way? Or is this just a sneaky way of advertising for the website?
Yes, I’m cynical
The trick here is; there isn’t any magic numbers. It just works with position sticky.
How funny, I noticed the footer on this website last week and have been meaning to recreate it. Timing couldn’t have been better, thanks for sharing!
Odoo.com has done the sliding footer for years now. It really is pretty cool though for sure
The cat picture makes me feel happy.
This was a trend a while ago with some designers I was working with. I really liked it but it never seemed to stick around.
One thing to be careful about when you’re sliding elements over one another is re-renders. Check the Paint Profiler in Chrome to make sure that your slideout footer isn’t causing jank: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool#rendering-settings
I am html-css learner in this post, The footer is not sliding out as its behaviour suggest, but it did cover the whole body width, achieving its 100% set attribute, but sliding animation is not seen when the document is loaded.
In the main tag css, main-height is used and set to 100vh. My questions:
1. Why is main-height is used, why NOT height?
2. Why is vh is used instead pixel, What is difference between 100vh and 100px? Thanks
Hi Jelili,
The
min-heightattribute is used to guarantee that the height will be at least100vh– as opposed toheight, which will explicitly set the height to100vh(and no taller/ shorter).A
vhunit is relative to the height of the viewport and, therefore,100vhis equivalent to 100% of the viewport height. As per above, this will guarantee that the body will be at least the same height as the viewport.Thank you very much Jak. That means I need to go back on drawing board for more css knowledge.
Another issue is that it’s not accessible for keyboard navigation when there are links inside the footer.
This can be solved by using the
:focus-withinselector on the footer to addposition:relativeor a higherz-index.