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