Creating a Sticky Footer with Flexbox

A sticky footer is a footer that sticks to the bottom of the page 0:00 regardless of the amount of content on the page. 0:04 If a page's content is shorter than the height of the browser, 0:07 you end up with a footer that sits near the middle of the page 0:10 instead of at the bottom where it belongs. 0:13 And because of that, you sometimes get a big 0:16 undesirable gap between the bottom of the view port, In the footer. 0:19 This is a common problem in web design. 0:23 Now there are different methods for creating sticky footers with CSS. 0:26 In the CSS layout basics course, you learned a popular method that uses 0:31 the CSS calc function, and the view port relative VH unit, but 0:35 flex boxes flexibility is also a great solution for these types of problems. 0:40 Other sticky footer methods involve doing calculations that subtract 0:45 the footer's height from the total height of the browser. 0:49 Or, other methods involve adding an extra wrapper div to your site, 0:52 just to force the footer down to the bottom of the page. 0:56 Well, with flex box, you can make it work without adding extra elements or 0:59 doing any calculations, so let me show you how. 1:03 Following a mobile first approach, I'm going to write these flex box properties 1:06 as base styles outside of any media query. 1:10 So they apply to all screen sizes and devices. 1:13 So the first thing I'm going to do is make the body of the page a flex container. 1:16 So I'll target the body, and set its display body to flex, 1:22 then I'm going to set its flex direction to column. 1:28 Setting the body's display to flex 1:35 makes the child containers of the body flex items. 1:37 So now, main header, banner, row, and main footer are all flex items. 1:40 And setting flex direction to column stacks the elements vertically. 1:47 Otherwise they're going to be laid out horizontally on a single line. 1:52 I'll show you what that looks like by deleting the flex direction declaration. 1:55 Next I'll give the body a min height of 100vh. 2:07 One vh is equal to one one-hundredth, or 1%, of the height of the view port. 2:11 So this means that the body's height will take up at least the entire 2:19 height of the view port. 2:23 Back in the browser nothing too special happens just yet. 2:25 The element types are still based on the content inside them, so 2:29 we still get the gap at the bottom of the page. 2:33 So, now I want the row container to stretch so 2:36 that it fills all of the free vertical space inside the body. 2:40 Now we know that the flex-grow and 2:45 flex properties determine how much of the available space inside the flex container an item should take up. 2:47 So I'll go back to my base styles and target the row container and 2:53 set its flex value to 1. 2:57 Now here I'm using the flex property, but 3:00 you can also use the flex-grow property and it will work the same way. 3:02 So now the row stretches to fill all the available space. 3:08 So it pushes the footer down to the bottom of the view port. 3:11 And that's pretty much it. 3:15 Now, other sticky footer methods work well only when the footer has a fixed height. 3:16 What's great about the flex box method is that you can have a flexible 3:21 multi lined footer in your layout. 3:25 So for instance if I go back to my index.html file and 3:27 paste some text inside the footer. 3:31 So here i'm pasting a long paragraph, notice how the footer 3:34 remains in the same place without dropping below the view port height. 3:38 The Flexbox features you learned in this course give you a new set of tools for 3:43 building websites and applications. 3:47 I encourage you to experiment with Flexbox and 3:49 use it wherever you can in your layouts. 3:51 If you wanna practice what you learned in this course, 3:53 you can convert a website layout built with CSS floats, displays, or 3:55 positioning to a responsive Flexbox layout. 4:00 Or you can build the additional pages for the Best City Guide website using flexbox. 4:03 Try redesigning parts of your website using flexbox properties. 4:08 You can start by implementing a sticky footer, or build the navigation in 4:11 columns with flexbox like you did earlier in this section. 4:15 Or you can use the files from this course and 4:18 simply experiment with all the flexbox properties. 4:20 For example you can change the direction and alignment of properties of 4:24 some of the Flex containers, or the order and Flex properties of Flex items. 4:28 Just to see how they affect the layout. 4:32 Remember Flexbox doesn't have to entirely replace your current layout methods, but 4:34 you can use it to improve upon how you build layouts. 4:39 And if you create something awesome don't forget to share your work and 4:42 inspire your peers in the Treehouse Community. 4:44 We're always here to help. 4:47 So if you have questions about anything covered in this course 4:48 feel free to reach out to the Treehouse staff, other students, or 4:52 you can get ahold of me on Twitter. 4:55 I'm at guilh 4:56