I’m fairly good at getting stuff to work nicely as I come from a coding background, but I’m lacking in the design/visual department. I’m building a website for a friend and one of the things he wants is a footer at the bottom of every page with a few useful links in. Anyway when the page has a fair amount of content on it looks fine, always at the bottom of the page, but when there isn’t that much on the page it appears where the content stops and cuts the page up, with a big unsightly gap underneath.
I tried looking for a few tutorials but the ones I did find either were for sticky footers which always stayed on the screen, or were poorly explained (in my opinion).
I’ve tried using min-height but then if the window is taller than min height I still get the unsightly gap. Is there a ‘right’ way to do this?
There’s a few approaches you could take. First, and my favourite solution, is to have the
html have the same background color as the bottom of my footer, so the transition isn’t that obvious.
You could also use the
vh unit, which corresponds to 1% of the height of the current viewport. It’s not supported by all browsers or devices, but it does a decent job of always having something at the bottom of the screen (or below it).