1
00:00:00,540 --> 00:00:04,812
In this video, I'll show you how to
create a sticky footer in your layout.

2
00:00:04,812 --> 00:00:09,433
In web design, a sticky footer is a footer
that sticks to the bottom of the page

3
00:00:09,433 --> 00:00:13,240
regardless of the amount
of content on the page.

4
00:00:13,240 --> 00:00:17,208
Usually, if a page's content is shorter
than the height of the browser,

5
00:00:17,208 --> 00:00:20,920
you end up with a footer that sits in
the middle of the page instead of at

6
00:00:20,920 --> 00:00:22,920
the bottom where it belongs.

7
00:00:22,920 --> 00:00:27,440
Because of that, you sometimes get a big
undesirable gap between the bottom of

8
00:00:27,440 --> 00:00:29,640
the viewport and the footer.

9
00:00:29,640 --> 00:00:33,160
This is a common problem you may
come across when building a layout.

10
00:00:33,160 --> 00:00:37,200
Now there are different methods for
creating sticky footers with CSS.

11
00:00:37,200 --> 00:00:42,733
In this video, I'm going to cover a popular
method that uses the CSS calc function and

12
00:00:42,733 --> 00:00:45,340
the viewport relative VH unit.

13
00:00:45,340 --> 00:00:48,940
It's also a method that requires
the least amount of CSS.

14
00:00:48,940 --> 00:00:50,829
First in the HTML file,

15
00:00:50,829 --> 00:00:57,010
I'm going to add a new div that wraps
the main header and container div.

16
00:00:57,010 --> 00:01:00,845
Now, this is another one of those
instances where it's helpful to use

17
00:01:00,845 --> 00:01:03,100
a wrapper div in your layout.

18
00:01:03,100 --> 00:01:07,840
So right above the opening header
tag I'll add a div element and

19
00:01:07,840 --> 00:01:10,360
give it the class wrap.

20
00:01:10,360 --> 00:01:13,567
Then I'll add the closing div tag for

21
00:01:13,567 --> 00:01:17,820
this wrap div right above
the opening footer tag.

22
00:01:23,503 --> 00:01:28,480
So notice how I'm not including
the footer inside the new wrap div.

23
00:01:28,480 --> 00:01:31,400
I'm going to use the new
wrapper to enforce

24
00:01:31,400 --> 00:01:36,380
the footer to stick to the bottom
of the page with a little CSS.

25
00:01:36,380 --> 00:01:39,711
So inside the media
query in my stylesheet,

26
00:01:39,711 --> 00:01:44,490
I'm going to create a new CSS
rule that targets the class wrap.

27
00:01:46,460 --> 00:01:50,331
To force the footer to the bottom 
of the page I'm going to use the 

28
00:01:50,331 --> 00:01:51,950
min-height property.

29
00:01:51,950 --> 00:01:56,006
Min-height sets the minimum
height an element can be, so

30
00:01:56,006 --> 00:01:59,560
I'm going to give it
a minimum height of 100vh.

31
00:02:01,750 --> 00:02:06,746
Vh is a viewport relative unit,
it stands for viewport height because

32
00:02:06,746 --> 00:02:12,180
it allows sizing purely based on
the height of the browser viewport.

33
00:02:12,180 --> 00:02:18,880
Now one vh is equal to one-one hundredth
or 1% of the height of the viewport.

34
00:02:18,880 --> 00:02:22,092
So the value 100vh means that the

35
00:02:22,092 --> 00:02:26,950
min-height will be 100% of
the viewport height.

36
00:02:26,950 --> 00:02:32,325
So when I save my stylesheet and refresh
the browser, we can see that it works,

37
00:02:32,325 --> 00:02:37,129
but it's pushing the footer down
a little too far below the viewport,

38
00:02:37,129 --> 00:02:39,913
and I'm getting a vertical scroll bar.

39
00:02:42,216 --> 00:02:46,943
So if the page's content is shorter than
the height of the browser, I want to stick

40
00:02:46,943 --> 00:02:51,740
the footer to the bottom of the viewport
without seeing the scroll bar.

41
00:02:51,740 --> 00:02:56,270
The height of the footer is
what's making the page scroll.

42
00:02:56,270 --> 00:03:00,604
Since I'm expanding the wrapper to
the full height of the viewport,

43
00:03:00,604 --> 00:03:04,420
it's pushing the footer
below the viewport area.

44
00:03:04,420 --> 00:03:09,264
So to fix this, if I open the Chrome
Developer Tools and inspect the main

45
00:03:09,264 --> 00:03:14,740
footer element, I can see that
the footer's total height is 89 pixels.

46
00:03:14,740 --> 00:03:21,195
Now instead of trying to calculate a value
equivalent to 100vh minus 89 pixels,

47
00:03:21,195 --> 00:03:26,680
I'm going to use the CSS calc function
to handle this tricky math for me.

48
00:03:27,940 --> 00:03:33,450
Calc is a CSS function that performs
calculations and returns a result.

49
00:03:33,450 --> 00:03:38,098
With calc you write simple mathematical
expressions that add, subtract,

50
00:03:38,098 --> 00:03:40,630
multiply, and divide values.

51
00:03:40,630 --> 00:03:42,302
So back in my wrap rule,

52
00:03:42,302 --> 00:03:47,690
I'm going to replace the main
height value of 100vh with calc.

53
00:03:47,690 --> 00:03:51,370
So I'm going to type calc
followed by a set of parentheses.

54
00:03:51,370 --> 00:03:56,074
Now inside the parentheses I'm going
to use a subtraction operator to write

55
00:03:56,074 --> 00:04:00,720
a mathematical expression that will
subtract 89 pixels from 100vh.

56
00:04:01,750 --> 00:04:08,270
So I'm going to type
100vh minus 89 pixels.

57
00:04:08,270 --> 00:04:13,386
So the result of this calc expression
is going to be used as the value for

58
00:04:13,386 --> 00:04:14,750
min-height.

59
00:04:14,750 --> 00:04:21,200
So again, this is calculating 100% of the
viewport height minus the footer height.

60
00:04:21,200 --> 00:04:23,440
So let's take a look at
this in the browser.

61
00:04:23,440 --> 00:04:28,386
I'll save my stylesheet and when I refresh
the browser we can see that it worked,

62
00:04:28,386 --> 00:04:30,420
the scroll bar is now gone.

63
00:04:30,420 --> 00:04:34,380
So now the footer will always stick to
the bottom of the page no matter how

64
00:04:34,380 --> 00:04:36,436
little content there is on the page.

65
00:04:41,516 --> 00:04:45,150
This method works great if your
footer has a fixed height.

66
00:04:45,150 --> 00:04:49,407
In later courses you'll learn how to
create a flexible sticky footer using more

67
00:04:49,407 --> 00:04:51,860
advanced CSS layout properties.

68
00:04:51,860 --> 00:04:54,746
You can also learn a whole lot
more about the calc function and

69
00:04:54,746 --> 00:04:58,520
viewport relative units in
the Teacher's Notes of this video.

70
00:04:58,520 --> 00:05:00,800
You've learned a lot of
useful CSS layout tips and

71
00:05:00,800 --> 00:05:02,600
methods in this section of the course.

72
00:05:02,600 --> 00:05:05,895
I hope you're starting to get some ideas
on how you can use some of these in

73
00:05:05,895 --> 00:05:06,660
your projects.