{"id":301,"date":"2024-09-05T09:00:00","date_gmt":"2024-09-05T09:00:00","guid":{"rendered":"https:\/\/blissfuldebt.com\/?p=301"},"modified":"2025-03-06T17:24:39","modified_gmt":"2025-03-06T17:24:39","slug":"sticky-headers-and-full-height-elements-a-tricky-combination","status":"publish","type":"post","link":"https:\/\/blissfuldebt.com\/index.php\/2024\/09\/05\/sticky-headers-and-full-height-elements-a-tricky-combination\/","title":{"rendered":"Sticky Headers And Full-Height Elements: A Tricky Combination"},"content":{"rendered":"
Sticky Headers And Full-Height Elements: A Tricky Combination<\/title><\/p>\n<article>\n<header>\n<h1>Sticky Headers And Full-Height Elements: A Tricky Combination<\/h1>\n<address>Philip Braunen<\/address>\n<p> 2024-09-05T09:00:00+00:00<br \/>\n 2025-03-06T17:04:34+00:00<br \/>\n <\/header>\n<p>I was recently asked by a student to help with a <em>seemingly<\/em> simple problem. She\u2019d been working on a website for a coffee shop that sports a sticky header, and she wanted the hero section right underneath that header to span the rest of the available vertical space in the viewport.<\/p>\n<p>Here\u2019s a visual demo of the desired effect for clarity.<\/p>\n<figure class=\"video-embed-container\">\n<div class=\"video-embed-container--wrapper\"><\/div>\n<\/figure>\n<p>Looks like it should be easy enough, right? I was sure (read: overconfident) that the problem would only take a couple of minutes to solve, only to find it was a much deeper well than I\u2019d assumed.<\/p>\n<p>Before we dive in, let\u2019s take a quick look at the initial markup and CSS to see what we\u2019re working with:<\/p>\n<pre><code class=\"language-html\"><body>\n <header class=\"header\">Header Content<\/header>\n <section class=\"hero\">Hero Content<\/section>\n <main class=\"main\">Main Content<\/main>\n<\/body>\n<\/code><\/pre>\n<pre><code class=\"language-css\">.header {\n position: sticky;\n top: 0; \/* Offset, otherwise it won't stick! *\/\n}\n\n\/* etc. *\/\n<\/code><\/pre>\n<p>With those declarations, the <code>.header<\/code> will stick to the top of the page. And yet the <code>.hero<\/code> element below it remains intrinsically sized. This is what we want to change.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design & UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops \u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"the-low-hanging-fruit\">The Low-Hanging Fruit<\/h2>\n<p>The first impulse you might have, as I did, is to enclose the header and hero in some sort of parent container and give that container <code>100vh<\/code> to make it span the viewport. After that, we could use Flexbox to distribute the children and make the hero grow to fill the remaining space.<\/p>\n<pre><code class=\"language-html\"><body>\n <div class=\"container\">\n <header class=\"header\">Header Content<\/header>\n <section class=\"hero\">Hero Content<\/section>\n <\/div>\n <main class=\"main\">Main Content<\/main>\n<\/body>\n<\/code><\/pre>\n<pre><code class=\"language-css\">.container {\n height: 100vh;\n display: flex;\n flex-direction: column;\n}\n\n.hero {\n flex-grow: 1;\n}\n\n\/* etc. *\/\n<\/code><\/pre>\n<p>This looks correct at first glance, but watch what happens when scrolling past the hero.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"yLdQgQo\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Attempt #1: Container + Flexbox [forked]](https:\/\/codepen.io\/smashingmag\/pen\/yLdQgQo) by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/yLdQgQo\">Attempt #1: Container + Flexbox [forked]<\/a> by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/figcaption><\/figure>\n<p><strong>The sticky header gets trapped in its parent container!<\/strong> But.. <em>why<\/em>?<\/p>\n<p>If you\u2019re anything like me, this behavior is unintuitive, at least initially. You may have heard that <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/p\/position\/#aa-values\"><code>sticky<\/code> is a combination of <code>relative<\/code> and <code>fixed<\/code> positioning<\/a>, meaning it participates in the normal flow of the document but only until it hits the edges of its scrolling container, at which point it becomes <code>fixed<\/code>. While viewing <code>sticky<\/code> as a combination of other values can be a useful mnemonic, it fails to capture one important difference between <code>sticky<\/code> and <code>fixed<\/code> elements:<\/p>\n<p><strong>A <code>position: fixed<\/code> element doesn\u2019t care about the parent it\u2019s nested in or any of its ancestors.<\/strong> It will break out of the normal flow of the document and place itself directly offset from the viewport, as though glued in place a certain distance from the edge of the screen.<\/p>\n<p><strong>Conversely, a <code>position: sticky<\/code> element will be pushed along with the edges of the viewport (or next closest scrolling container), but it will never escape the boundaries of its direct parent.<\/strong> Well, at least if you don\u2019t count visually <code>transform<\/code>-ing it. So a better way to think about it might be, <a href=\"https:\/\/css-tricks.com\/sticky-as-a-local-fixed\/\">to steal from Chris Coyier<\/a>, that <span>\u201c<code>position: sticky<\/code><\/span> is, in a sense, a locally scoped <code>position: fixed<\/code>.\u201d This is an intentional design decision, one that allows for section-specific sticky headers like the ones made famous by alphabetical lists in mobile interfaces.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"OJeaWrM\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Sticky Section Headers [forked]](https:\/\/codepen.io\/smashingmag\/pen\/OJeaWrM) by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/OJeaWrM\">Sticky Section Headers [forked]<\/a> by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/figcaption><\/figure>\n<p>Okay, so this approach is a no-go for our predicament. We need to find a solution that doesn\u2019t involve a container around the header.<\/p>\n<h2 id=\"fixed-but-not-solved\">Fixed, But Not Solved<\/h2>\n<p>Maybe we can make our lives a bit simpler. Instead of a container, what if we gave the <code>.header<\/code> element a <em>fixed<\/em> height of, say, <code>150px<\/code>? Then, all we have to do is define the <code>.hero<\/code> element\u2019s height as <code>height: calc(100vh - 150px)<\/code>.<\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"yLdQgGz\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [Attempt #2: Fixed Height + Calc() [forked]](https:\/\/codepen.io\/smashingmag\/pen\/yLdQgGz) by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/yLdQgGz\">Attempt #2: Fixed Height + Calc() [forked]<\/a> by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/figcaption><\/figure>\n<p>This approach <em>kinda<\/em> works, but the downsides are more insidious than our last attempt because they may not be immediately apparent. You probably noticed that the header is too tall, and we\u2019d wanna do some math to decide on a better height.<\/p>\n<p>Thinking ahead a bit,<\/p>\n<ul>\n<li>What if the <code>.header<\/code>\u2019s children need to wrap or rearrange themselves at different screen sizes or grow to maintain legibility on mobile?<\/li>\n<li>What if JavaScript is manipulating the contents?<\/li>\n<\/ul>\n<p>All of these things could subtly change the <code>.header<\/code>\u2019s ideal size, and chasing the right height values for each scenario has the potential to spiral into a maintenance nightmare of unmanageable breakpoints and magic numbers — especially if we consider this needs to be done not only for the <code>.header<\/code> but also the <code>.hero<\/code> element that depends on it.<\/p>\n<p>I would argue that this workaround also just <em>feels<\/em> wrong. Fixed heights break one of the main affordances of CSS layout — the way elements automatically grow and shrink to adapt to their contents — and not relying on this usually makes our lives <em>harder<\/em>, not simpler.<\/p>\n<p>So, we\u2019re left with\u2026<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"a-novel-approach\">A Novel Approach<\/h2>\n<p>Now that we\u2019ve figured out the constraints we\u2019re working with, another way to phrase the problem is that we want the <code>.header<\/code> and <code>.hero<\/code> to <em>collectively<\/em> span <code>100vh<\/code> without sizing the elements explicitly or wrapping them in a container. Ideally, we\u2019d find <em>something<\/em> that already is <code>100vh<\/code> and align them to that. This is where it dawned on me that <code>display: grid<\/code> may provide just what we need!<\/p>\n<p>Let\u2019s try this: We declare <code>display: grid<\/code> on the <code>body<\/code> element and add another element before the <code>.header<\/code> that we\u2019ll call <code>.above-the-fold-spacer<\/code>. This new element gets a height of <code>100vh<\/code> and spans the grid\u2019s entire width. Next, we\u2019ll tell our spacer that it should take up two grid rows and we\u2019ll anchor it to the top of the page.<\/p>\n<p>This element must be entirely empty because we don\u2019t ever want it to be visible or to register to screen readers. We\u2019re merely using it as a crutch to tell the grid how to behave.<\/p>\n<div class=\"break-out\">\n<pre><code class=\"language-html\"><body>\n <!-- This spacer provides the height we want -->\n <div class=\"above-the-fold-spacer\"><\/div>\n\n <!-- These two elements will place themselves on top of the spacer -->\n <header class=\"header\">Header Content<\/header>\n <section class=\"hero\">Hero Content<\/section>\n\n <!-- The rest of the page stays unaffected -->\n <main class=\"main\">Main Content<\/main>\n<\/body>\n<\/code><\/pre>\n<\/div>\n<pre><code class=\"language-css\">body {\n display: grid;\n}\n\n.above-the-fold-spacer {\n height: 100vh;\n \/* Span from the first to the last grid column line *\/\n \/* (Negative numbers count from the end of the grid) *\/\n grid-column: 1 \/ -1;\n \/* Start at the first grid row line, and take up 2 rows *\/\n grid-row: 1 \/ span 2; \n}\n\n\/* etc. *\/\n<\/code><\/pre>\n<p><em>This<\/em> is the magic ingredient.<\/p>\n<p>By adding the spacer, we\u2019ve created two grid rows that <em>together<\/em> take up exactly <code>100vh<\/code>. Now, all that\u2019s left to do, in essence, is to tell the <code>.header<\/code> and <code>.hero<\/code> elements to align themselves to those existing rows. We do have to tell them to start at the same grid column line as the <code>.above-the-fold-spacer<\/code> element so that they won\u2019t try to sit next to it. But with that done\u2026 <em>ta-da!<\/em><\/p>\n<figure class=\"break-out\">\n<p data-height=\"480\" data-theme-id=\"light\" data-slug-hash=\"YzoRNdo\" data-user=\"smashingmag\" data-default-tab=\"result\" class=\"codepen\">See the Pen [The Solution: Grid Alignment [forked]](https:\/\/codepen.io\/smashingmag\/pen\/YzoRNdo) by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/p><figcaption>See the Pen <a href=\"https:\/\/codepen.io\/smashingmag\/pen\/YzoRNdo\">The Solution: Grid Alignment [forked]<\/a> by <a href=\"https:\/\/codepen.io\/Phendan\">Philip<\/a>.<\/figcaption><\/figure>\n<p>The reason this works is that <strong>a grid container can have multiple children occupying the same cell overlaid on top of each other<\/strong>. In a situation like that, the tallest child element defines the grid row\u2019s overall height — or, in this case, the combined height of the two rows (<code>100vh<\/code>).<\/p>\n<p>To control how exactly the two visible elements divvy up the available space between themselves, we can use the <code>grid-template-rows<\/code> property. I made it so that the first row uses <code>min-content<\/code> rather than <code>1fr<\/code>. This is necessary so that the <code>.header<\/code> doesn\u2019t take up the same amount of space as the <code>.hero<\/code> but instead only takes what it needs and lets the hero have the rest.<\/p>\n<p>Here\u2019s our full solution:<\/p>\n<pre><code class=\"language-css\">\nbody {\n display: grid;\n grid-template-rows: min-content 1fr;\n}\n\n.above-the-fold-spacer {\n height: 100vh;\n grid-column: 1 \/ -1;\n grid-row: 1 \/ span 2;\n}\n\n.header {\n position: sticky;\n top: 0;\n grid-column-start: 1;\n grid-row-start: 1;\n}\n\n.hero {\n grid-column-start: 1;\n grid-row-start: 2;\n}\n<\/code><\/pre>\n<p>And voila: A sticky header of arbitrary size above a hero that grows to fill the remaining visible space!<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"caveats-and-final-thoughts\">Caveats and Final Thoughts<\/h2>\n<p>It\u2019s worth noting that <strong>the HTML order of the elements matters here<\/strong>. If we define <code>.above-the-fold-spacer<\/code> after our <code>.hero<\/code> section, it will overlay and block access to the elements underneath. We can work around this by declaring either <code>order: -1<\/code>, <code>z-index: -1<\/code>, or <code>visibility: hidden<\/code>.<\/p>\n<p>Keep in mind that this is a simple example. If you were to add a sidebar to the left of your page, for example, you\u2019d need to adjust at which column the elements start. Still, in the majority of cases, using a CSS Grid approach is likely to be less troublesome than the Sisyphean task of manually managing and coordinating the height values of multiple elements.<\/p>\n<p>Another upside of this approach is that it\u2019s <strong>adaptable<\/strong>. If you decide you want a group of three elements to take up the screen\u2019s height rather than two, then you\u2019d make the invisible spacer span three rows and assign the visible elements to the appropriate one. Even if the hero element\u2019s content causes its height to exceed <code>100vh<\/code>, the grid adapts without breaking anything. It\u2019s even well-supported in all modern browsers.<\/p>\n<p>The more I think about this technique, the more I\u2019m persuaded that it\u2019s actually quite clean. Then again, you know how lawyers can talk themselves into their own arguments? If you can think of an even simpler solution I\u2019ve overlooked, feel free to reach out and let me know!<\/p>\n<div class=\"signature\">\n <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n <span>(gg, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Sticky Headers And Full-Height Elements: A Tricky Combination Sticky Headers […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-301","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/comments?post=301"}],"version-history":[{"count":1,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/301\/revisions"}],"predecessor-version":[{"id":302,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/posts\/301\/revisions\/302"}],"wp:attachment":[{"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/media?parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/categories?post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blissfuldebt.com\/index.php\/wp-json\/wp\/v2\/tags?post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}