Problem: Fullscreen Section with Sticky Bottom CTA

hard
40 min
Try to pin a call-to-action button to the bottom center without overlapping growing content.

Problem description

Given a <section class="fullscreen-section"><div class="content"></div><button class="cta-btn"></button></section>, write CSS so the section always fills the viewport and the .cta-btn is pinned to the bottom center of the section, even if the content div grows. Both content and button should always be visible and never overlap.

Goal

Keep the CTA button at the bottom center of the fullscreen section, regardless of content height.

Constraints

  • No JavaScript is allowed.

  • Do not modify HTML.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.

Problem: Fullscreen Section with Sticky Bottom CTA

hard
40 min
Try to pin a call-to-action button to the bottom center without overlapping growing content.

Problem description

Given a <section class="fullscreen-section"><div class="content"></div><button class="cta-btn"></button></section>, write CSS so the section always fills the viewport and the .cta-btn is pinned to the bottom center of the section, even if the content div grows. Both content and button should always be visible and never overlap.

Goal

Keep the CTA button at the bottom center of the fullscreen section, regardless of content height.

Constraints

  • No JavaScript is allowed.

  • Do not modify HTML.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.