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

Posted by Joey L.
Joey L.
4,601 Points

Strange margin outside of HTML element after <footer>

I've been working on this website for a while now, and only today, after sitting on a larger monitor, have I been able to see a strange space present after the footer. This strange space is only there when the content in the main body above is not large enough to create a scrollbar for the page height.

I'm confused as to why this is happening. According to the browser's developer tools, it is space outside of the HTML element. Has anyone experienced this issue before?

Here is a screenshot: http://postimg.org/image/qdsvegbmz/full/

I have used some relative positioning on certain elements (with no top, right, left, bottom settings) only so child elements with position: absolute to be positioned relative to those parent elements. Would this actually have affected such an outcome?

geoffrey
geoffrey
28,736 Points

Is the site you are working on hosted ? I could try to help you with the code in front of me, playing with the css rules, without, even with your indications It's pretty hard to tell you as I haven't got this issue yet

3 Answers

Andre Romano
Andre Romano
8,809 Points

Shouldn't setting the html and body height to 100% work? You could then position the footer absolute and set its bottom: 0

The article you've linked should fix you issue.

Joey L.
Joey L.
4,601 Points

It does buddy. Works wonders. Cheers

Andre Romano
Andre Romano
8,809 Points
Andre Romano
Andre Romano
8,809 Points

It could probably be caused by a bottom margin on that copyright paragraph.

Joey L.
Joey L.
4,601 Points
Joey L.
Joey L.
4,601 Points

Thank you for your replies guys. I realized that this issue is a natural occurrence on big monitors with large browser viewports whenever the content is not big enough to fill the screen (logically, if the footer is not placed to be at the absolute bottom of its container, then it will stay at the top.) From my understanding now, the body tag will stretch only as large as its content unless a height is specified. This was causing the strange color difference with that empty margin.

http://www.cssreset.com/how-to-keep-footer-at-bottom-of-page-with-css/

Now while I don't understand why the developer's tools read this space as being outside the HTML tag, but a quick fix for the color difference was changing the background color on body {}. I had linear gradients from #222 to #151515 in the body element, which stopped with the footer, but the body background color went on to fill the empty space for the large viewport. Once I changed this background color to the last color stop of the gradient, it blended in.

For now, I don't mind the footer being a bit high on monitors (Though I also know how to fix this now). The biggest issue for me was the color difference.

geoffrey
geoffrey
28,736 Points

Cool that you've finally found a solution to your issue. If ever you have some spaces to host your projects, use it to put your project online and then give the link of this one, It's often easier to play with the code than guessing what could be the issue, even if you were very complete on your side :).

Or use codepen as an exemple.