Unique Case
Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with less content require manual scrolling. My goal is to have a fixed footer at the bottom of the page, similar to a slide in a presentation, with the header always remaining fixed at the top.
"Innovative Solution"
To address this issue, I devised a simple solution involving two types of footers - one fixed and one loose. By implementing a conditional tag like
<Layout footer="loose">...</Layout>The Dilemma
Diving deeper into testing across various browsers, I discovered that these "slide-like" pages were sometimes getting hidden below the header due to differences in viewport size and user resolution. To visualize this problem, you can visit this link or view screenshots below:
https://i.sstatic.net/PkXtA.jpg Here, the page features a fixed footer and a single-slide appearance, but when viewed in Opera, the content goes underneath the header.
https://i.sstatic.net/Sj8xm.jpg In another test scenario, extra content was added to observe how the layout behaves with longer content and a fixed footer.
https://i.sstatic.net/HodY2.jpg Similar to the previous case, this time with a "loose footer".
Seeking a Resolution
To enhance the responsiveness of my website, I am exploring the idea of fetching the rendered height of a page and comparing it against the viewport size. This way, a class could be dynamically applied to the footer based on the page's height, ensuring better alignment. While researching solutions, I came across an intriguing article on using breakpoints without CSS, which sparked ideas for creating a hook that automatically adjusts the footer based on these metrics.
As I haven't found a concrete method to tackle this particular issue, I welcome any insights or suggestions in resolving this challenge effectively.