🏠 back to Observable

Window height

We have the reactive variable width that returns the width available to the application we are working on; it’s evidently a significant fraction of window.innerWidth. Is there something similar but for height?

Note that window.innerHeight returns a number that is generally much larger than the actual height appears to be. Using my browser’s inspector, it looks likewindow.innerHeight tells us the height of an iframe that actually holds the notebook.

Unfortunately there is not (because of the way the sandbox works). You can get the screen height with window.screen.availHeight or window.screen.height, or you can derive a height from the width using a fixed aspect ratio (e.g., width * 16 / 9). You can also pop-out and control a window using window.open…

Can you provide a little more detail on what you’re use a reactive height variable for?


Sure! I’m thinking of building brackets for the NCAA tournament. I’d like to have the option fit it all on one screen so space will be at a premium. It’d be nice to know width and height so I can pack it in as tightly as possible.

I was already planning on falling back on screen.height. I didn’t know of screen.availHeight; I can make it work well enough with that.


1 Like

While it’s not quite done yet, here’s a look at the NCAA Brackets I was talking about:

Again, vertical space is at quite a premium so it’s nice to have a reasonable way to pack it onto the screen as tightly as possible.

I think it might be worth pointing out that, while window.innerHeight doesn’t work so well here on Observable, it still works as expected when embedded on an external page. For example: