Problem description

You have a web page with dynamic content of variable height inside a .content container. Implement a footer that stays out of view until the user reaches the bottom of the content; from that point on, the footer should stick to the bottom of the browser window while scrolling.

Goal

Make the footer element stick to the bottom of the viewport once the user scrolls past the main content using only CSS.

Constraints

• Make sure to use pure CSS (no JavaScript is allowed).

• Ensure compatibility with modern browsers (Chrome, Firefox, and Edge).

• Do not change HTML structure beyond adding classes.

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.