Nelson's log

Layout trick for filling to browser height

When putting maps on pages I often want the map to take the full browser height, not some fixed pixel height. That’s easy, just set height: 100% and the map fills the browser. But what if you want to reserve some space at the bottom, say for a text display? I don’t think any flavor of CSS lets you set height to “100% – 100px”, and I don’t know of a way to trick the box model of CSS alone to say “reserve 100px and then fill the rest with this thing”. It may be doable in pure CSS, but I don’t know how.

However it is doable with a bit of Javascript. In this case we have a map that fills all of the window but the last 150px, then a time series graph in that last 150px.

<!-- The map itself. Height set by Javascript. -->
<div id="map" style="width: 100%;"></div>

<!-- Divider -->
<div id="divider" style="background-color: black; height: 1px; width: 100%"></div>

<!-- Time series graph at the bottom -->
<div id="graph" style="width: 100%; height: 150px; background-color: white"></div>

// Resize the map so that it's the height of the window minus the graph
function setMapHeight() {
    var graph = document.getElementById("graph");
    var divider = document.getElementById("divider");
    document.getElementById("map").style.height = window.innerHeight - (graph.offsetHeight + divider.offsetHeight);
window.addEventListener("load", setMapHeight, false);
window.addEventListener("resize", setMapHeight, false);