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 Henry Stiltner
Henry Stiltner
4,178 Points

I'm trying to understand out how the css calc() function works with the browsers viewport.

Imagine this, I have a simple header with an h1, ul and a couple of li items in it. I also have a footer at the bottom of the page. The header is 71.2px and the footer is 90.4px. So if i wanted to make a sticky footer I would just do,

footer {
    min-height: calc(100vh - 90.4);
}

however this produces a scrollbar. My solution was to,

footer {
    min-height: calc(100vh - 107);
}

and this works perfectly. So where any why are these extra pixels coming into place? I'll have the site up on a web server for awhile if anyone wants to check it out. 73.113.183.185:8000

1 Answer

Frans de Haan
Frans de Haan
5,193 Points
Frans de Haan
Frans de Haan
5,193 Points

I think your last item before the footer have a margin-bottom. Make the margin-bottom of this element 0.