Как заставить DIV заполнить оставшееся вертикальное пространство окна браузера?

У меня есть этот упрощенный код:

This is a line of text<br/>
<div style="background-color: orange; height: 100%">And this is a div</div>

Высота div составляет 100% высоты клиентского пространства окна браузера, которая в сумме с высотой текстовой строки больше, чем высота окна, поэтому вам нужно прокручивать.

Как сделать высоту div так, чтобы она занимала высоту окна браузера минус строка текста?

Или, другими словами, как я могу заставить div занимать все свободное пространство по вертикали относительно того, какие другие объекты DOM уже занимают?