In my continuing search for my “best” web site layout, I’ve come down pretty strongly on the side-by-side “dashboard” style, where there aren’t page headers or footers. The reasons I’m not particularly liking page headers and footers has to do with the way I tend to scroll through sites, but pressing the spacebar. This tends to make the content scroll underneath the fixed headers, and I have to back up using the up arrow. It’s a pain with so many other websites, especially when they interpret using the up arrow as “The User must want more options in the header! Let’s make it BIGGER” which means I have to up arrow even more.
Creating a Grid side-by-side layout with 100% stretch
Here’s a Codepen.IO Pen that creates that layout using CSS Grid.
The important thing to remember about this:
When I want an inner block to stretch to the full height of the window, I must set that inner block element, and all wrapping block elements height to 100%.
Making this work on a React app
In a typical React app, I have 4 levels that need to be set to 100%:
- app component
- the div inside the app component
The canonical react app, as
create-react-app defines it, looks like
After the react app loads, it looks like so:
(Just off the top of my head, I’m unsure what the react app’s
like exactly, but I’m sure it is a
div element so the below will work.)
So I use this as my basic CSS:
to get the react app to fill the full window height like I want it.