**Understanding Sticky Footers**
So, you don't really need to concern yourself with index.html. It doesn't really matter. So, it is final.html if you want to see the final version. You can see here if I scroll down we have a few things that you need to note. There's a div here that wraps everything in with the class called "page content". Now below that page content it's not within it is footer and that contains a div as well.
All of these elements are important. If I go to your student.html, it's the same markup we got. Page content and then outside of that we have a footer with a div inside of it. Now if we go to our sandbox.css, let's get started with our styling of this sticky footer. The first thing that you need to always do is start off with the html and body select the two of those we're going to give it a height of 100 percent and a margin of zero so we want to clean that up.
Make sure that the html and body have a height of 100 of the viewport and a margin of zero so it doesn't mess with our calculations. Now we're going to select that page content class that we saw right here and in there we're going to say minimum height or min height rather of 100 that forces it to have a minimum height of 100 rather than the height of whatever is contained.
So, minimum height 100 of the viewport or its parent which is html and body. Now we're going to come back to page content and give it some negative margin but first I want to move forward so that it makes sense why we're giving it negative margin. So let's go down to page content after and we're going to say "content" it's going to be an empty string because you know when you have an after virtual element you need to give it content so that it actually appears and display block.
Now we're going to do is below that we're going to select the footer and page content after now what we're doing here is we're selecting the footer itself and the after virtual element of the page content. And all we're doing is giving it a height of let's say 120 pixels now you need a fixed height for the footer. It could be any height that you want if it's only 30 pixels or if it's 500 pixels it's up to you but you need to know the height that's the catch with the sticky footer.
The reason why is if I were to go and view this in the browser you can see now that the footer is actually below the viewport. So if I scroll down there's a 120 pixel footer below so all I need to do here is in the page content element which is everything within here is bring that footer up the height of its container so the height of the footer is 120 pixels.
So, if we go back to page content and i'm just going to have a comment here that says "margin bottom negative 120 pixels" save that head over to your browser check out the student version. And there's the sticky footer at the bottom. I can't scroll up and down it's just there and if I were to bring the viewport smaller it's a perfect sticky footer.
If I brought it all the way up so it bumps up at the bottom of this content it's going to stop with the margin that is already declared there and I can scroll down. So, if this content grows this sticky footer stays where it is until it bumps up against it and it will push it further down but it is always stuck to the bottom of the viewport.
**Sticky Footer Markup**
The markup for a sticky footer is very simple. It consists of page content that div and then outside of that div we have a footer with a div inside of it. Any content you have can be put in this div.
So, essentially the markup looks like this: "you have a div with the class let's call it page content and then you have a footer all you're doing is giving the html and body a height of 100 percent". The page content itself needs to be minimum height of 100 percent.
"Now we're going to come back to page content and give it some negative margin but first I want to move forward so that it makes sense why we're giving it negative margin. So let's go down to page content after" the page content after virtual element needs to be display block "the footer and the page content after pseudo element or virtual element is 120 pixels in this case it could be any height you want".
"WEBVTTKind: captionsLanguage: enhey everyone welcome back to day number 13 of css3 in 30 days today we're going to be building a css sticky footer now what is a sticky footer well a sticky footer is a footer on your web page that sticks to the bottom of your viewport regardless of the content size within the page so for example if you have a page layout and you only have one sentence and then you have your footer let's call it a colored footer it's not going to stay at the bottom of the viewport of your browser that's because it collapses up into the end of the content so your footer is actually a quarter of the way down the page and you got all this white space below it it looks pretty bad now the what now a sticky footer makes that footer actually go to the bottom of the browser viewport even if the content is way up here so let me show you what that looks like over here i have in the number 13 sticky footer project files go ahead and download that there's a number of different files in this one it's a little bit different than what we have normally been doing i'll show you what that looks like here so we have index.html final.html student.html and we also have final and sandbox.css now what why do i have that the index.html page is the info page it's just instructions on what you're going to be building and why you're going to be building it and then a couple of buttons that allow you to go to the student version and the final version so the info page is just your instructions and then access to these buttons so if i go to the student version this is the the sandbox the student version with the sticky footer down here that you need to make sticky now this is an example of a non-sticky footer the content of this page here as you can see it is pretty short and the bottom of the viewport is way down here and this footer is there so it's not actually it doesn't actually look like a footer it's just another element below this content now we want to make this footer stick to the bottom of the viewport like the final version right here now if i were to resize this browser window that footer follows along as you can see there follows where i drag and then it stops at this here and then there's a scroll so that is a sticky footer and then the student version you can see is non-sticky so it's actually quite easy to make this it involves very minimal markup and just some css trickery so let's go ahead jump into our our code editor here and let's get started so you don't really need to concern yourself with index.html it doesn't really matter so it is final.html if you want to see the final version you can see here if i scroll down we have a few things that you need to note there's a div here that wraps everything in with the class called page content now below that page content it's not within it is footer and that contains a div as well all of these elements are important now if i go to your student.html it's the same markup we got page content and then outside of that we have a footer with a div inside of it now if we go to our sandbox.css let's get started with our styling of this sticky footer the first thing that you need to always do is start off with the html and body select the two of those we're going to give it a height of 100 percent and a margin of zero so we want to clean that up make sure that the html and body have a height of 100 of the viewport and a margin of zero so it doesn't mess with our calculations now we're going to select that page content class that we saw right here and in there we're going to say minimum height or min height rather of 100 that forces it to have a minimum height of 100 rather than the height of whatever is contained so minimum height 100 of the viewport or its parent which is html and body now we're going to come back to page content and give it some negative margin but first i want to move forward so that it makes sense why we're giving it negative margin so let's go down to page content after and we're going to say content it's going to be an empty string because you know when you have an after virtual element you need to give it content so that it actually appears and display block now we're going to do is below that we're going to select the footer and page content after now what we're doing here is we're selecting the footer itself and the after element the after virtual element of the page content and all we're doing is giving it a height of let's say 120 pixels now you need a fixed height for the footer it could be any height that you want if it's only 30 pixels or if it's 500 pixels it's up to you but you need to know the height that's the catch with the sticky footer the reason why is if i were to go and view this in the browser you can see now that the footer is actually below the viewport so if i scroll down there's 120 pixel footer below so all i need to do here is in the page content element which is everything within here is bring that footer up the height of its container so the height of the footer is 120 pixels so if we go back to page content and i'm just going to have a comment here that says margin bottom negative 120 pixels save that head over to your browser check out the student version and there's the sticky footer at the bottom i can't scroll up and down it's just there and if i were to bring the viewport smaller it's a perfect sticky footer if i brought it all the way up so it bumps up at the bottom of this content it's going to stop with the margin that is already declared there and i can scroll down so if this content grows this sticky footer stays where it is until it bumps up against it and it will push it further down but it is always stuck to the bottom of the viewport that is it for a sticky footer it's very simple quick overview in the markup we have page content that div and then outside of that div we have a footer and then a div within that footer for any content you have so essentially the markup looks like this you have a div with the class let's call it page content and then you have a footer all you're doing in the css is giving the html and the body a height of 100 the page content itself needs to be minimum height of 100 percent and the page content after virtual element needs to be display block the footer and the page content after pseudo element or virtual element is 120 pixels in this case it could be any height you want and then the page content needs a negative bottom margin of the same height as the footer and then you can see here that that is all the markup you need and it should work just fine over here in your browser that's it for the sticky footer go ahead and use that in your own websites i use it for my websites when i have a footer a client website or a project website if i have a footer that i need stuck to the bottom i will go ahead and create a sticky footer it takes no time out of your day and it's very quick to implement hopefully this was valuable to you see you tomorrow in day 14.hey everyone welcome back to day number 13 of css3 in 30 days today we're going to be building a css sticky footer now what is a sticky footer well a sticky footer is a footer on your web page that sticks to the bottom of your viewport regardless of the content size within the page so for example if you have a page layout and you only have one sentence and then you have your footer let's call it a colored footer it's not going to stay at the bottom of the viewport of your browser that's because it collapses up into the end of the content so your footer is actually a quarter of the way down the page and you got all this white space below it it looks pretty bad now the what now a sticky footer makes that footer actually go to the bottom of the browser viewport even if the content is way up here so let me show you what that looks like over here i have in the number 13 sticky footer project files go ahead and download that there's a number of different files in this one it's a little bit different than what we have normally been doing i'll show you what that looks like here so we have index.html final.html student.html and we also have final and sandbox.css now what why do i have that the index.html page is the info page it's just instructions on what you're going to be building and why you're going to be building it and then a couple of buttons that allow you to go to the student version and the final version so the info page is just your instructions and then access to these buttons so if i go to the student version this is the the sandbox the student version with the sticky footer down here that you need to make sticky now this is an example of a non-sticky footer the content of this page here as you can see it is pretty short and the bottom of the viewport is way down here and this footer is there so it's not actually it doesn't actually look like a footer it's just another element below this content now we want to make this footer stick to the bottom of the viewport like the final version right here now if i were to resize this browser window that footer follows along as you can see there follows where i drag and then it stops at this here and then there's a scroll so that is a sticky footer and then the student version you can see is non-sticky so it's actually quite easy to make this it involves very minimal markup and just some css trickery so let's go ahead jump into our our code editor here and let's get started so you don't really need to concern yourself with index.html it doesn't really matter so it is final.html if you want to see the final version you can see here if i scroll down we have a few things that you need to note there's a div here that wraps everything in with the class called page content now below that page content it's not within it is footer and that contains a div as well all of these elements are important now if i go to your student.html it's the same markup we got page content and then outside of that we have a footer with a div inside of it now if we go to our sandbox.css let's get started with our styling of this sticky footer the first thing that you need to always do is start off with the html and body select the two of those we're going to give it a height of 100 percent and a margin of zero so we want to clean that up make sure that the html and body have a height of 100 of the viewport and a margin of zero so it doesn't mess with our calculations now we're going to select that page content class that we saw right here and in there we're going to say minimum height or min height rather of 100 that forces it to have a minimum height of 100 rather than the height of whatever is contained so minimum height 100 of the viewport or its parent which is html and body now we're going to come back to page content and give it some negative margin but first i want to move forward so that it makes sense why we're giving it negative margin so let's go down to page content after and we're going to say content it's going to be an empty string because you know when you have an after virtual element you need to give it content so that it actually appears and display block now we're going to do is below that we're going to select the footer and page content after now what we're doing here is we're selecting the footer itself and the after element the after virtual element of the page content and all we're doing is giving it a height of let's say 120 pixels now you need a fixed height for the footer it could be any height that you want if it's only 30 pixels or if it's 500 pixels it's up to you but you need to know the height that's the catch with the sticky footer the reason why is if i were to go and view this in the browser you can see now that the footer is actually below the viewport so if i scroll down there's 120 pixel footer below so all i need to do here is in the page content element which is everything within here is bring that footer up the height of its container so the height of the footer is 120 pixels so if we go back to page content and i'm just going to have a comment here that says margin bottom negative 120 pixels save that head over to your browser check out the student version and there's the sticky footer at the bottom i can't scroll up and down it's just there and if i were to bring the viewport smaller it's a perfect sticky footer if i brought it all the way up so it bumps up at the bottom of this content it's going to stop with the margin that is already declared there and i can scroll down so if this content grows this sticky footer stays where it is until it bumps up against it and it will push it further down but it is always stuck to the bottom of the viewport that is it for a sticky footer it's very simple quick overview in the markup we have page content that div and then outside of that div we have a footer and then a div within that footer for any content you have so essentially the markup looks like this you have a div with the class let's call it page content and then you have a footer all you're doing in the css is giving the html and the body a height of 100 the page content itself needs to be minimum height of 100 percent and the page content after virtual element needs to be display block the footer and the page content after pseudo element or virtual element is 120 pixels in this case it could be any height you want and then the page content needs a negative bottom margin of the same height as the footer and then you can see here that that is all the markup you need and it should work just fine over here in your browser that's it for the sticky footer go ahead and use that in your own websites i use it for my websites when i have a footer a client website or a project website if i have a footer that i need stuck to the bottom i will go ahead and create a sticky footer it takes no time out of your day and it's very quick to implement hopefully this was valuable to you see you tomorrow in day 14.\n"
