How can an html element fill out 100% of the remaining screen height, using css only?

forget all the answers, this line of CSS worked for me in 2 seconds :


1vh = 1% of browser screen height


For responsive layout scaling, you might want to use :

min-height: 100vh

[update november 2018]
As mentionned in the comments, using the min-height might avoid having issues on reponsive designs

[update april 2018] As mentioned in the comments, back in 2011 when the question was asked, not all browsers supported the viewport units.
The other answers were the solutions back then — vmax is still not supported in IE, so this might not be the best solution for all yet.

Leave a Comment