How can I make a footer's height expand to take up the remainder of the screen?

Question

I'm looking to do something like:

Where I have a footer at the bottom of the page which has a height that expands to take up the remainder of the screen.

Is it possible to do this in CSS?

Answer 1

I've looked at doing this before and wasn't able to find a way to do it using strictly CSS. However, I have seen it done successfully using Javascript (the jQuery CSS height function).

Answer 2

if your target is to make the footer at bottom. you can make the footer (DIV) set to

.footer{position: absolute; bottom: 10}

the bottom you need to change the value as needed.