Sticky header and footer in Tailwind - Mini Project: Build & Apply

Sticky Header and Footer with Tailwind CSS

📖 Scenario: You are building a simple webpage layout that always shows a header at the top and a footer at the bottom of the browser window. The main content area scrolls if it is too long. This is common for websites that want important navigation or info always visible.

🎯 Goal: Create a webpage with a sticky header and sticky footer using Tailwind CSS. The header stays fixed at the top, the footer stays fixed at the bottom, and the main content scrolls between them.

📋 What You'll Learn

Use Tailwind CSS utility classes only

Create a header that sticks to the top of the viewport

Create a footer that sticks to the bottom of the viewport

Create a main content area that scrolls if content is tall

Use semantic HTML elements:

,

,

Ensure the layout is responsive and accessible

💡 Why This Matters

🌍 Real World

Sticky headers and footers are common on websites to keep navigation or important info visible while users scroll content.

💼 Career

Web developers often need to create layouts with fixed elements and scrollable content using CSS frameworks like Tailwind for fast, consistent styling.

1

Create the basic HTML structure

Create the basic HTML skeleton with header, main, and footer elements inside the body. Add some placeholder text inside each section exactly as: Header content, Main content, and Footer content.

Tailwind

    
    
    Sticky Header and Footer
    


    

Hint

Use semantic tags <header>, <main>, and <footer> inside the <body>. Put the exact text inside each.

2

Add Tailwind classes for sticky header and footer

Add Tailwind CSS classes to the header and footer elements to make them sticky. Use sticky top-0 for the header and sticky bottom-0 for the footer. Also add background color bg-gray-800 and text color text-white to both for visibility.

Tailwind

    
    
    Sticky Header and Footer
    


    
    Header content
    Main content
    Footer content

Hint

Use class="sticky top-0 bg-gray-800 text-white p-4" on the header and class="sticky bottom-0 bg-gray-800 text-white p-4" on the footer.

3

Make main content scrollable with padding

Add Tailwind classes to the main element to make it scrollable between the header and footer. Use overflow-auto and add vertical padding py-8. Also add a minimum height of min-h-[calc(100vh-8rem)] to ensure it fills the space between header and footer (assuming header and footer height about 4rem each).

Tailwind

    
    
    Sticky Header and Footer
    


    Header content
    
    Main content
    Footer content

Hint

Use class="overflow-auto py-8 min-h-[calc(100vh-8rem)]" on the main element.

4

Add multiple paragraphs to main for scrolling test

Add multiple <p> paragraphs inside the main element to create enough content to scroll. Add exactly three paragraphs with the texts: Paragraph 1, Paragraph 2, and Paragraph 3.

Tailwind

    
    
    Sticky Header and Footer
    


    Header content
    
        
    
    Footer content

Hint

Inside the main element, add three paragraphs with the exact texts.

Practice

1. What does the Tailwind class sticky do when applied to a header or footer?

easy

A. It makes the element disappear after scrolling 100px.

B. It hides the element when scrolling down.

C. It keeps the element visible at a fixed position while scrolling.

D. It changes the element's color on scroll.

Solution

1. Step 1: Understand the sticky class behavior

   The sticky class makes an element stick to a position relative to the viewport when scrolling.

2. Step 2: Apply to header or footer context

   When used on a header or footer, it keeps that element visible at the top or bottom as the page scrolls.

3. Final Answer:

   It keeps the element visible at a fixed position while scrolling. -> Option C

4. Quick Check:

   Sticky = fixed visibility on scroll [OK]

Hint: Sticky means element stays visible while scrolling [OK]

Common Mistakes:

• Confusing sticky with fixed positioning
• Thinking sticky hides elements on scroll
• Assuming sticky changes colors automatically

2. Which Tailwind classes correctly create a sticky footer that stays at the bottom of the viewport?

easy

A. sticky bottom-0

B. sticky top-0

C. fixed bottom-0

D. absolute bottom-0

Solution

1. Step 1: Identify sticky footer classes

   To make a footer sticky at the bottom, use sticky with bottom-0 so it sticks to the bottom edge.

2. Step 2: Compare other options

   top-0 sticks to top, fixed is different positioning, and absolute does not stick on scroll.

3. Final Answer:

   <code>sticky bottom-0</code> -> Option A

4. Quick Check:

   Sticky + bottom-0 = sticky footer [OK]

Hint: Use sticky with bottom-0 for sticky footer [OK]

Common Mistakes:

• Using top-0 for footer instead of bottom-0
• Confusing fixed with sticky positioning
• Using absolute which doesn't stick on scroll

3. What will happen if you apply sticky top-0 bg-white shadow classes to a header element in Tailwind CSS?

medium

A. The header becomes fixed and covers the whole page.

B. The header scrolls away and has no background or shadow.

C. The header sticks to the bottom with transparent background.

D. The header sticks to the top with white background and shadow while scrolling.

Solution

1. Step 1: Analyze the classes

   sticky top-0 makes the header stick to the top of the viewport. bg-white sets a white background. shadow adds a subtle shadow.

2. Step 2: Predict visual effect on scroll

   The header stays visible at the top with white background and shadow as the user scrolls down the page.

3. Final Answer:

   The header sticks to the top with white background and shadow while scrolling. -> Option D

4. Quick Check:

   sticky top-0 + bg-white + shadow = sticky visible header [OK]

Hint: sticky top-0 keeps header visible with styles [OK]

Common Mistakes:

• Thinking sticky hides header on scroll
• Confusing bottom-0 with top-0
• Ignoring background and shadow effects

4. You want a sticky header but it disappears behind other content when scrolling. Which Tailwind class should you add to fix this?

medium

A. opacity-50

B. z-50

C. hidden

D. overflow-hidden

Solution

1. Step 1: Understand the problem

   The sticky header is behind other content, meaning it has a lower stacking order (z-index).

2. Step 2: Use z-index to fix stacking

   Adding z-50 increases the z-index, bringing the header above other elements.

3. Final Answer:

   z-50 -> Option B

4. Quick Check:

   Use z-50 to fix sticky header layering [OK]

Hint: Add z-50 to bring sticky header above content [OK]

Common Mistakes:

• Using opacity which changes transparency
• Using hidden which hides the element
• Using overflow-hidden which clips content

5. You want a page with a sticky header and footer using Tailwind. The header should stick at top, footer at bottom, and main content scrolls between them. Which code snippet correctly implements this?

hard

A. Header\nContent\nFooter

B. Header\nContent\nFooter

C. Header\nContent\nFooter

D. Header\nContent\nFooter

Solution

1. Step 1: Check header and footer sticky positions

   Header
   \n
   Content
   \n
   Footer
   uses sticky top-0 for header and sticky bottom-0 for footer, which is correct for sticky header and footer.

2. Step 2: Verify main content scroll area

   Main uses overflow-auto and height calculated as full viewport minus header/footer height, allowing scrolling between sticky elements.

3. Step 3: Compare other options

   Header
   \n
   Content
   \n
   Footer
   uses fixed positioning which overlays content;
   Header
   \n
   Content
   \n
   Footer
   swaps top and bottom for header/footer incorrectly;
   Header
   \n
   Content
   \n
   Footer
   uses absolute which does not stick on scroll.

4. Final Answer:

   Option A code snippet correctly implements sticky header and footer with scrollable main content. -> Option A

5. Quick Check:

   Sticky top-0 + sticky bottom-0 + scrollable main = correct layout [OK]

Hint: Use sticky top-0 and bottom-0 with scrollable main [OK]

Common Mistakes:

• Using fixed instead of sticky causing overlap
• Swapping top and bottom classes on header/footer
• Not setting main content height for scrolling