Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

eli reiner
eli reiner
963 Points
Posted by eli reiner
eli reiner
963 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

Bert Witzel
.a{fill-rule:evenodd;}techdegree seal-36
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 Points

Can you post your code so we can take a look?

1 Answer

Clinton Hays
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 Points
Clinton Hays
.a{fill-rule:evenodd;}techdegree seal-36
Clinton Hays
Front End Web Development Techdegree Graduate 18,156 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!