From the course: CSS Layouts: From Float to Flexbox and Grid

Unlock the full course today

Join today to access over 24,900 courses taught by industry experts.

Exercise: Create a sticky footer with Grid

Exercise: Create a sticky footer with Grid - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial Buy for my team

Exercise: Create a sticky footer with Grid

“

- [Instructor] When the overall page content is shorter than the height of the browser, we'll see empty space after the last page component. But we also tend to expect a footer to be displayed at the bottom of the page. But by default, any container element is only as tall as its content. To make the footer stay at the bottom of the page, often referred to as a sticky footer. We can use CSS grid to size the rows to fit the height of the view port. Let's switch over to the grid CSS file. All page content is added inside the body element, and even though it represents the browser view port, the height of the body element is the same as its content. So the first style we need to add is height to the body element to make it expand the height of the view port. It's common to add this style to both the HTML and body selector. So let's create a new selector list. I'm going to put it right above the body, starting with HTML…

Contents