- CSS Reset with Normalize 5:24
- Creating a Layout Wrapper 3:27
- Why Vertical Margins Collapse 3:42
- Centering Page Content and Creating a Full-width Header 4:48
- Layout Wrapper Challenge 2 objectives
- Using a Mobile First Approach 6:21
- Creating a Sticky Footer 5:07
- Getting Started with CSS Layout Review 6 questions
Preview
Video Player
00:00
00:00
Creating a Sticky Footer
5:07In web design, a sticky footer is a footer that sticks to the bottom of the page regardless of the amount of content on the page.
In this video, I'll show you how to
create a sticky footer in your layout.
0:00
In web design, a sticky footer is a footer
that sticks to the bottom of the page
0:04
regardless of the amount
of content on the page.
0:09
Usually, if a page's content is shorter
than the height of the browser,
0:13
you end up with a footer that sits in
the middle of the page instead of at
0:17
the bottom where it belongs.
0:20
Because of that, you sometimes get a big
undesirable gap between the bottom of
0:22
the viewport and the footer.
0:27
This is a common problem you may
come across when building a layout.
0:29
Now there are different methods for
creating sticky footers with CSS.
0:33
In this video, I'm going to cover a popular
method that uses the CSS calc function and
0:37
the viewport relative VH unit.
0:42
It's also a method that requires
the least amount of CSS.
0:45
First in the HTML file,
0:48
I'm going to add a new div that wraps
the main header and container div.
0:50
Now, this is another one of those
instances where it's helpful to use
0:57
a wrapper div in your layout.
1:00
So right above the opening header
tag I'll add a div element and
1:03
give it the class wrap.
1:07
Then I'll add the closing div tag for
1:10
this wrap div right above
the opening footer tag.
1:13
So notice how I'm not including
the footer inside the new wrap div.
1:23
I'm going to use the new
wrapper to enforce
1:28
the footer to stick to the bottom
of the page with a little CSS.
1:31
So inside the media
query in my stylesheet,
1:36
I'm going to create a new CSS
rule that targets the class wrap.
1:39
To force the footer to the bottom
of the page I'm going to use the
1:46
min-height property.
1:50
Min-height sets the minimum
height an element can be, so
1:51
I'm going to give it
a minimum height of 100vh.
1:56
Vh is a viewport relative unit,
it stands for viewport height because
2:01
it allows sizing purely based on
the height of the browser viewport.
2:06
Now one vh is equal to one-one hundredth
or 1% of the height of the viewport.
2:12
So the value 100vh means that the
2:18
min-height will be 100% of
the viewport height.
2:22
So when I save my stylesheet and refresh
the browser, we can see that it works,
2:26
but it's pushing the footer down
a little too far below the viewport,
2:32
and I'm getting a vertical scroll bar.
2:37
So if the page's content is shorter than
the height of the browser, I want to stick
2:42
the footer to the bottom of the viewport
without seeing the scroll bar.
2:46
The height of the footer is
what's making the page scroll.
2:51
Since I'm expanding the wrapper to
the full height of the viewport,
2:56
it's pushing the footer
below the viewport area.
3:00
So to fix this, if I open the Chrome
Developer Tools and inspect the main
3:04
footer element, I can see that
the footer's total height is 89 pixels.
3:09
Now instead of trying to calculate a value
equivalent to 100vh minus 89 pixels,
3:14
I'm going to use the CSS calc function
to handle this tricky math for me.
3:21
Calc is a CSS function that performs
calculations and returns a result.
3:27
With calc you write simple mathematical
expressions that add, subtract,
3:33
multiply, and divide values.
3:38
So back in my wrap rule,
3:40
I'm going to replace the main
height value of 100vh with calc.
3:42
So I'm going to type calc
followed by a set of parentheses.
3:47
Now inside the parentheses I'm going
to use a subtraction operator to write
3:51
a mathematical expression that will
subtract 89 pixels from 100vh.
3:56
So I'm going to type
100vh minus 89 pixels.
4:01
So the result of this calc expression
is going to be used as the value for
4:08
min-height.
4:13
So again, this is calculating 100% of the
viewport height minus the footer height.
4:14
So let's take a look at
this in the browser.
4:21
I'll save my stylesheet and when I refresh
the browser we can see that it worked,
4:23
the scroll bar is now gone.
4:28
So now the footer will always stick to
the bottom of the page no matter how
4:30
little content there is on the page.
4:34
This method works great if your
footer has a fixed height.
4:41
In later courses you'll learn how to
create a flexible sticky footer using more
4:45
advanced CSS layout properties.
4:49
You can also learn a whole lot
more about the calc function and
4:51
viewport relative units in
the Teacher's Notes of this video.
4:54
You've learned a lot of
useful CSS layout tips and
4:58
methods in this section of the course.
5:00
I hope you're starting to get some ideas
on how you can use some of these in
5:02
your projects.
5:05