Flexible space between content and footer

I recently purchased a lovely new 32" display and it’s forcing to me to rethink how I build sites for larger displays, first in terms of header image size, but also the space between content and the footer. Previously I’d just chuck another couple blocs in there with 100px of padding but I think this needs a more flexible solution.

Ideally I’d like to set reasonable space beneath the bottom text or image, then turn anything beyond that into a flexible space, so that it expands or shrinks to match the height of the browser, while always show the footer at the bottom without having to scroll there. I’ve been playing around with custom classes trying to find a solution with percentage padding, but not yet found something that works in every case.

If you look at the image below I would basically want that area in red to be flexible, dependent on the browser height and change automatically as the browser resizes, so the footer is always visible without scrolling. Does anybody know of a way to do this?

Hi @Flashman
I think what you are looking for is the css ‘*vh’

Ie. example max-height: 20vh;
Will set it’s max height to 20% of the viewport height. Might need to just be a height setting, as not sure how Bootstrap will interpret that.


1 Like