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 Techniques Grid Layout Testing our Grid

Chad Buie
PLUS
Chad Buie
Courses Plus Student 1,820 Points

How to keep footer at the bottom on higher resolutions?

The code that worked across all resolutions:

.main-footer{ position:absolute; right: 0; bottom: 0; left 0; padding: 1rem; background-color: #efefef; text-align: center; }

7 Answers

Chad Buie
PLUS
Chad Buie
Courses Plus Student 1,820 Points

The footer does not stay at the bottom consistently across any monitor. Even the code I added does not work at all view ports. Any accuracy on this?

If you intended for the footer to be on the bottom at all times like the header with a nuanced effect of it always being in view regardless of scroll, you meant position: fixed; (if that wasn't clear with previous videos about positioning that was part of the course that was a prerequisite to this course & summarized at certain points in this course).

Chad Buie
PLUS
Chad Buie
Courses Plus Student 1,820 Points

I think there needs to be a special setting for viewport at high resolution with the markup in the file at the end of the grid segment.

Mark VonGyer
Mark VonGyer
21,239 Points

If you are trying to force the footer to scroll down with the screen, it would be better to use a jQuery plugin.

At the moment your footer appears bottom right, but if the screen is adjusted the footer doesn't always adjust immediately. A responsive position (float:right, clear:left;) would allow your footer to stay bottom right - and adapt to changes in screen size etc.

Hi, Chad:

The video associated with your question doesn't seem to correspond with your problem. Can you provide your code on CodePen or SassMeister for me to better help you?

Having a Macbook Pro w/ a rtina display, I don't recall experiencing problems applying the ideas involving absolute or fixxed positioning often associated with footers being fixed & the "sticky footer" technique often used for footers dependent on being properly viewed that way because of other floated elements before it.

I would not depend on jQuery for such a problem absentmindedly, especially if it's the only reason why you're thinking of including it.

Chad Buie
PLUS
Chad Buie
Courses Plus Student 1,820 Points

Honestly, it was the files attached at the end of the grid video. I was really let down to see that template not work at all in a consistent format. I don't think I will be taking another CSS course here. I feel liked I wasted a week of my time, because I have no confidence in the concepts taught.

As far as confidence in the material covered in the course, sorry to hear you aren't yet confident applying the concepts of the course yet beyond the code provided by the course.

My advice is to keep at it, regardless of where it takes you on & off Treehouse Island; there's no shame rewatching the course videos, rereading the material provided in teacher notes, and seeking alternate takes of the same material covered throughout the course—especially if it caters to a different learning style approach than the contents of this course encouraged (project-based learning).

Chad Buie: I opened the file and couldn't reproduce the problem; redownloading the project files since I personally took the course long ago a few moments ago, I couldn't reproduce the problem with the latest version of the files.

I viewed the template on Microsoft Edge, along with the the latest versions of Chrome, Firefox, & Safari.

Can you provide a screenshot of what you're seeing, as well as what browser & information about your HiDPi screen to better understand where you're coming from as far as having issues of the template rendering for you as it's demonstrated in the video?

Patrick Olvera
Patrick Olvera
6,339 Points

I was having the same problem so I did some searching and found a pretty simple solution. It requires that you have the 4 following divs. I didn't add the header div though, I simply added the id to my header element and the effect was the same. Make sure that the wrapper div is right against the body element otherwise this won't work.

'''html <body> <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> '''

'''css

wrapper {

min-height:100%;
position:relative;

}

header {

}

content {

padding-bottom:80px;   /* Height of the footer element */

}

footer {

width:100%;
height:80px;
position:absolute;
bottom:0;
left:0;
padding-top: .8rem;

} '''