Alternate way of filling browser with a div

A few weeks back I wrote up a trick for making a div fill the remaining browser height using Javascript to calculate a pixel height for the div on resize events. That seemed clunky to me and I just stumbled on a StackExchange question with an alternate method that’s CSS only using absolute positioning. Basically you create a box with top/left/right/bottom set to 0, then save a fixed amount of space at the top. The example uses padding-top, but I found I had to use margin-top instead, at least for a Leaflet map.

In retrospect I should have thought about this absolute positioning idea before! it makes much more sense. And it’s simpler not running any event code.

2 thoughts on “Alternate way of filling browser with a div

  1. Thanks, that’s a great article. Also I’m glad he talked about because I was considering trying to use it myself. It is sort of the right idea, afterall. But he scared me off and saved me time.

Comments are closed.