Sticky header and footer in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

Sticky Header Behavior

Given this Tailwind CSS code for a header, what will happen when you scroll the page?

Tailwind

<header class="sticky top-0 bg-white shadow p-4">Header Content</header>

A The header stays visible at the top of the page while scrolling.

B The header scrolls away with the page content.

C The header becomes fixed at the bottom of the page.

D The header disappears when scrolling down and reappears when scrolling up.

💡 Hint

Think about what the 'sticky' and 'top-0' classes do in Tailwind CSS.

The sticky class makes the element stick to a position when scrolling. top-0 means it sticks to the top edge. So the header stays visible at the top as you scroll.

❓ layout

intermediate

Sticky Footer Positioning

Which Tailwind CSS class combination correctly makes a footer stick to the bottom of the viewport even when the page content is short?

A <footer class="sticky bottom-0 bg-gray-200 p-4">Footer</footer>

B <footer class="absolute bottom-0 bg-gray-200 p-4">Footer</footer>

C <footer class="fixed bottom-0 w-full bg-gray-200 p-4">Footer</footer>

D <footer class="relative bottom-0 bg-gray-200 p-4">Footer</footer>

💡 Hint

Consider which positioning keeps the footer visible at the bottom regardless of content length.

The fixed class positions the footer relative to the viewport, so it stays at the bottom always. sticky only sticks when scrolling past it, which may not work if content is short.

❓ accessibility

advanced

Accessible Sticky Header

Which of these code snippets best improves accessibility for a sticky header in Tailwind CSS?

A <header class="sticky top-0 bg-white p-4" role="banner" aria-label="Main site header">Site Header</header>

B <header class="sticky top-0 bg-white p-4" tabindex="-1">Site Header</header>

C <header class="sticky top-0 bg-white p-4" aria-hidden="true">Site Header</header>

D <header class="sticky top-0 bg-white p-4" role="contentinfo">Site Header</header>

💡 Hint

Think about semantic roles and how screen readers identify page regions.

The role="banner" and aria-label help screen readers understand this is the main header. tabindex="-1" is for focus management but not best here. aria-hidden="true" hides content from assistive tech, which is bad for headers. role="contentinfo" is for footers, not headers.

❓ selector

advanced

CSS Selector for Sticky Footer

Which CSS selector correctly targets only the footer element with class 'sticky-footer' to apply sticky positioning?

A #sticky-footer { position: sticky; bottom: 0; }

B .sticky-footer footer { position: sticky; bottom: 0; }

C footer .sticky-footer { position: sticky; bottom: 0; }

D footer.sticky-footer { position: sticky; bottom: 0; }

💡 Hint

Remember how class selectors and element selectors combine.

footer.sticky-footer selects a footer element with class sticky-footer. Option D selects any footer inside an element with class sticky-footer. Option D selects any element with class sticky-footer inside a footer. Option D selects an element with id sticky-footer, not a class.

🧠 Conceptual

expert

Sticky Header and Footer Layout Challenge

You want a page with a sticky header at the top, a sticky footer at the bottom, and a scrollable main content area between them. Which Tailwind CSS layout approach achieves this correctly?

A

<div class="flex flex-col h-screen">
  <header class="sticky top-0 bg-white p-4">Header</header>
  <main class="flex-1 overflow-auto p-4">Content</main>
  <footer class="sticky bottom-0 bg-gray-200 p-4">Footer</footer>
</div>

B

<div class="flex flex-col h-screen">
  <header class="fixed top-0 w-full bg-white p-4">Header</header>
  <main class="flex-1 overflow-auto p-4 mt-16 mb-16">Content</main>
  <footer class="fixed bottom-0 w-full bg-gray-200 p-4">Footer</footer>
</div>

C

<div class="flex flex-col min-h-screen">
  <header class="sticky top-0 bg-white p-4">Header</header>
  <main class="flex-grow overflow-auto p-4">Content</main>
  <footer class="sticky bottom-0 bg-gray-200 p-4">Footer</footer>
</div>

D

<div class="grid grid-rows-[auto_1fr_auto] h-screen">
  <header class="sticky top-0 bg-white p-4">Header</header>
  <main class="overflow-auto p-4">Content</main>
  <footer class="sticky bottom-0 bg-gray-200 p-4">Footer</footer>
</div>

💡 Hint

Think about how fixed positioning works and how to prevent content from hiding behind header/footer.

Option B uses fixed positioning for header and footer, which keeps them always visible. The main content has top and bottom margins to avoid being hidden behind them. Options A, C, and D use sticky which does not guarantee footer stays visible if content is short or no scrolling occurs.