Comments on: How to Use CSS Grid for Sticky Headers and Footers https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Fri, 10 Feb 2023 19:45:35 +0000 hourly 1 https://wordpress.org/?v=6.2.2 By: KenF https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1802912 Fri, 10 Feb 2023 19:45:35 +0000 https://css-tricks.com/?p=319886#comment-1802912 In reply to Joey M-H.

When using dvh use vh as well:

height: 100vh;
height: 100dvh;

if the browser does not understand dvh the vh version will stand.

For the deeper understanding dvh will change as the keyboard appears and lowers on a mobile device.

]]> By: Alejandro https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1802617 Tue, 10 Jan 2023 06:27:23 +0000 https://css-tricks.com/?p=319886#comment-1802617 In reply to Joey M-H.

There is actually something for that situation. You can use 100dvh which stands for 100 device viewport height and it will calculate the actual height of the available screen, without the address bar or similar. Browser support is getting good except IE and Opera :)

]]> By: Jeff O https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1797464 Wed, 19 Oct 2022 17:22:38 +0000 https://css-tricks.com/?p=319886#comment-1797464 In reply to Guillaume.

Aye, there’s the rub. I read this article carefully, fully intending to implement, then I got to this non solution. You can have the layout you want if don’t mind confusing screen reader users! Adam, mention at the outside of the post that your solution nests the footer in main, so readers who have to implement correct semantics can move on.

]]> By: Ivan Kleshnin https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1771910 Tue, 11 May 2021 10:42:51 +0000 https://css-tricks.com/?p=319886#comment-1771910 #app {
height: 100vh;
}

Should be

#app {
min-height: 100vh;
}

otherwise the header will be scrolled in some cases despite “position: sticky”.

Similar case:
https://stackoverflow.com/questions/30227863/sticky-position-header-scrolled-away-after-a-while

]]> By: D7460N https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1770902 Fri, 16 Apr 2021 18:49:38 +0000 https://css-tricks.com/?p=319886#comment-1770902 Scrolling overflow content without polling, calculating, and setting height?

Wow!

Simple, minimal, natural (non-JS), cross browser solution to an otherwise everyday annoyance.

Thank you!

]]> By: Leon https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1769551 Wed, 10 Mar 2021 14:11:09 +0000 https://css-tricks.com/?p=319886#comment-1769551 In reply to Radoslav Sharapanov.

No keyboard scrolling works fine with that

]]> By: Xaver https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1763838 Wed, 07 Oct 2020 20:36:55 +0000 https://css-tricks.com/?p=319886#comment-1763838 Thanks Adam, your post helped me to solve a problem.

Here I tried to extract the gist of your blog: https://dev.to/xaverfleer/how-i-use-css-grid-for-sticky-headers-2ong

Curious what you think of it.

]]> By: Martin https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762622 Sat, 12 Sep 2020 10:52:07 +0000 https://css-tricks.com/?p=319886#comment-1762622 Subgrid link (mozilla site) doesn’t work, new link:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid

]]> By: Xaver https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762467 Tue, 08 Sep 2020 07:51:02 +0000 https://css-tricks.com/?p=319886#comment-1762467 Looks super interesting. I wish you added some HTML code to the post instead of (uniquely) codesandbox links. The links force me to jump from tab to tab.

]]> By: Rachel Andrew https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762466 Tue, 08 Sep 2020 07:40:55 +0000 https://css-tricks.com/?p=319886#comment-1762466 In reply to Jereti.

It should be grid-area: 2 / 1 / 3 / 4; as otherwise you are trying to start and end on the same row line. As you always have to span at least one track, it’s working as it’s being ignored so treated as span 1. Would be the sort of thing that would be nice for DevTools to pick up, they don’t seem to even if I use the longhands.

Example 35 in the spec has an example of spanning the same start and end lines listed as an error: https://www.w3.org/TR/css-grid-1/#grid-placement-span-int

]]> By: Radoslav Sharapanov https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762463 Tue, 08 Sep 2020 05:15:45 +0000 https://css-tricks.com/?p=319886#comment-1762463 Tried this trick once and scrapped it, because it breaks keyboard scrolling: up/down/page up/page down/space for page down. No matter how cool, if an idea breaks accessibility, it’s not worth it.

]]> By: Guillaume https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762403 Sat, 05 Sep 2020 12:07:55 +0000 https://css-tricks.com/?p=319886#comment-1762403 Hi Adam,

Beware that <header /><main /><footer /> has not the same semantic meaning than <header /><main>...<footer/></main>. It’s bad development practice to me!

]]> By: Lincoln Baxter III https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762359 Fri, 04 Sep 2020 12:04:59 +0000 https://css-tricks.com/?p=319886#comment-1762359 Interesting article, thanks!

I’m wondering how you would take it a step beyond your second example (if it’s possible,) and add content below the footer that gets pushed off the screen by the main content.

So you’d have a footer that sticks, but also content below it that does not stick.

You could think of it like a collapsible footer that only shows it’s sub-content if the main area is scrolled up far enough to reveal it.

A footer-footer that lives in the same scroll container :)

]]> By: Adam Rackis https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762341 Thu, 03 Sep 2020 19:32:08 +0000 https://css-tricks.com/?p=319886#comment-1762341 In reply to Joey M-H.

That’s actually a good point. It’s frustrating and I may actually add a note pointing this out. Thanks!

]]> By: Adam Rackis https://css-tricks.com/how-to-use-css-grid-for-sticky-headers-and-footers/#comment-1762340 Thu, 03 Sep 2020 19:31:35 +0000 https://css-tricks.com/?p=319886#comment-1762340 In reply to Jereti.

Hi! Actually, I’m not quite sure, but I’m checking on it now. It would seem as though you’re right, but what I have appears to work, too. I’m checking on whether what I had is actually spec’d and correct, or just some sort of undefined implementation detail that happened to work out. Even if the former I’m thinking I might adjust to be clearer.

Thanks for calling it out.

]]>