The complexity of a combination of sticky headers and elements of full height

The article examines the challenges that arise when trying to create a "sticky" title that is correctly coordinated with other elements on the web page, including elements that occupy the full height of the Viewer window (100VH). The author, Philip Braunen, examines the causes of these problems and offers solutions.

🚀 The author demonstrates the problem of the website of the coffee shop, which has a "sticky" title and the main section that should occupy the rest of the available vertical space. This seemingly simple task was more complicated than expected.

🧠 Philip explains that the elements with the position "Sticky" cannot go beyond its disadvantage, so the initial idea to put the title and the main section in a separate container did not work. The title remained within the container when scrolling the page.

💡 Philip offers a new approach using CSS Grid. It creates a "safe space" of 100Vh high and uses it to determine the heading place and the main section. This approach allows the "sticky" heading to go beyond the "safe space", but stay within the parent element.

• 📌 "sticky" headers in CSS can create problems when working with elements of full height.
• 📌 Sticky items cannot go beyond their missing parental element.
• 📌 CSS Grid can be used to solve this problem.