课程: CSS Essential Training

今天就学习课程吧！

今天就开通帐号，24,700 门业界名师课程任您挑！

Project: Sticky footer with flexbox

Project: Sticky footer with flexbox - CSS教程

课程: CSS Essential Training

开始一个月试用 购买团队方案

Project: Sticky footer with flexbox

“

(upbeat music) - [Narrator] In this update, we'll apply what we learned about the flex property to our projects. Currently, the homepage looks like this. To keep the footer at the bottom of the page even when the content is short, we'll create what is commonly referred to as a sticky footer. We'll use the flex property to expand the content container to fill the space in the middle to push the footer down to the bottom of the page. Because the height of the content and footer as well as the browser window are not set to a specific fixed height, this is a great opportunity to use flex box for flexible sizing. Let's go back to the editor and take a look at the current HTML structure of the homepage. Here's how we'll implement the sticky footer. All the content is contained within this content wrapper div. The footer is contained in its own footer tag. I'll just collapse this block so that we can see these containers a…

内容