Tailwindmarkup~30 mins

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

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a 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.

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

Need a hint?

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

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

Need a hint?

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