Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Fullscreen Section with Sticky Bottom CTA

Solution: Fullscreen Section with Sticky Bottom CTA

Let’s pin a call-to-action button to the bottom center without overlapping growing content.

We'll cover the following...

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