Sticky header and footer in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the header sticky at the top of the page.

Tailwind

<header class="bg-blue-600 text-white p-4 [1]">
  <h1 class="text-xl font-bold">My Website</h1>
</header>

Drag options to blanks, or click blank then click option'

Arelative

Bfixed bottom-0

Cabsolute top-0

Dsticky top-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed positioning at the bottom instead of sticky at the top.

Using relative positioning which does not stick.

Using sticky top-0 makes the header stick to the top when scrolling.

2fill in blank

medium

Complete the code to make the footer sticky at the bottom of the page.

Tailwind

<footer class="bg-gray-800 text-white p-4 [1]">
  <p>© 2024 My Website</p>
</footer>

Drag options to blanks, or click blank then click option'

Asticky top-0

Bfixed top-0

Csticky bottom-0

Drelative

Attempts:

3 left

💡 Hint

Common Mistakes

Using sticky top-0 which sticks to the top instead of bottom.

Using fixed top-0 which sticks to the top.

The sticky bottom-0 classes keep the footer visible at the bottom when scrolling.

3fill in blank

hard

Fix the error in the main content area to avoid it being hidden behind the sticky header.

Tailwind

<main class="p-4 [1]">
  <p>Welcome to the main content!</p>
</main>

Drag options to blanks, or click blank then click option'

Amb-16

Bmt-16

Cpt-0

Dpb-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin-bottom instead of margin-top.

Using padding-top 0 which does not add space.

Adding mt-16 (margin-top) pushes the main content below the sticky header to avoid overlap.

4fill in blank

hard

Fill both blanks to make the header and footer sticky and ensure the main content does not overlap them.

Tailwind

<header class="bg-blue-600 text-white p-4 [1]">
  <h1 class="text-xl font-bold">My Website</h1>
</header>

<main class="p-4 [2]">
  <p>Main content goes here.</p>
</main>

<footer class="bg-gray-800 text-white p-4 sticky bottom-0">
  <p>© 2024 My Website</p>
</footer>

Drag options to blanks, or click blank then click option'

Asticky top-0

Bmt-16

Cmb-16

Dfixed top-0

Attempts:

3 left

💡 Hint

Common Mistakes

Using fixed positioning for header which may cause overlap.

Adding margin-bottom instead of margin-top to main content.

The header uses sticky top-0 to stick at the top, and the main content uses mt-16 to avoid overlapping the header.

5fill in blank

hard

Fill all three blanks to create a sticky header and footer with proper spacing in the main content.

Tailwind

<header class="bg-blue-600 text-white p-4 [1]">
  <h1 class="text-xl font-bold">My Website</h1>
</header>

<main class="p-4 [2] [3]">
  <p>Here is the main content area.</p>
</main>

<footer class="bg-gray-800 text-white p-4 sticky bottom-0">
  <p>© 2024 My Website</p>
</footer>

Drag options to blanks, or click blank then click option'

Asticky top-0

Bmt-16

Cmb-16

Dfixed bottom-0

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting margin-bottom on main content causing overlap with footer.

Using fixed positioning for header or footer incorrectly.

The header is sticky at the top with sticky top-0. The main content has margin-top and margin-bottom (mt-16 mb-16) to avoid overlapping the header and footer.

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