CSS CSS Layout Basics Getting Started with CSS Layout Creating a Sticky Footer

This doesn't work

https://w.trhou.se/zojybscevl

Am I doing something wrong? I still have the vertical scroll.

The whole calc thing looks an incredibly hacky solution and not elegant at all. Is there a more simple solution - even if it means more CSS code?

I'm no CSS expert but even for me - if I need to start calculating with numbers inside the CSS file - it doesn't look right.

Please tell me I'm not right...

2 Answers

Steven Parker
Steven Parker
186,321 Points

It looks right to me. I don't see a vertical scroll bar unless I make the window too short for the content to fit.

But this isn't the only way to stick a footer at the bottom of the window. There's another technique using "position: fixed;" and "bottom: 0;" that will do it without the calculation (but the scrolling works differently).

I got it to work by replacing 89 with 112px on the .wrap class. But again, I have a feeling that on different screens this might break. I'm using a 1920x1080 resolution on a 12.5 inch display.

I also got it to work by adding the following to the .main-footer:

.main-footer { position: fixed; bottom: 0; width: 100%; }

I had to add the width, otherwise the footer gets pushed to the left for some reason.

Thanks again Steven!