Problem: Fullscreen Section with Sticky Bottom CTA
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
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.