CSS CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

eli reiner
eli reiner
961 Points

How can I get the footer to reach till the bottom of the page?

I see in the video that the footer reaches all the way down to the bottom of the page. How was this accomplished? I don't see a difference between my code and the teacher's code, but my footer reaches only till the three quarters of the page

Clinton Hays
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 15,530 Points

I believe what is happening here is that your viewport height is larger than the content that is included in the index.html. Remember the footers are not elements that are stuck to the bottom of the page by default, they can be used anywhere. And, unless you specify a body height in your css, it only takes up as much space as needed to hold the content in your html. If you'd like to experiment, copy and paste the paragraphs a few times. What happens is that your content takes up more space on the page forcing the body height to expand until the footer, which is the last element in your html, reaches the bottom of the viewport height. It should appear to be at the bottom of your page now.

My assumption is that Guil's screen resolution may be smaller than yours. To demonstrate this, you can adjust the size of your browser window. When you reduce the height, you'll notice your scrollbar appear on the right once the content has exceeded your browser window's height.

I hope this helps! Happy coding!

/* ---- EDIT ---- */

Just watched the video about creating a sticky footer. Viewport height was the issue! :'D Hope you got it solved!