Example layout with menu and main content scroll bars

2020-01-29

The above layout graphic is completely created with HTML divs and CSS. It shows how CSS Grid can be used to create a common layout. It features a header, a footer, a menu and a main content area. Importantly, it adds scroll bars to sections of the page that are likely to have dynamic content: the menu and main sections. Use your browser to inspect the elements and have a play with how it works. The code is included at the end of this post for convenience.

In the example, the height is set to 400px. In the real world, this could also be set to 100vh and it would basically be a full-screen, responsive layout. Though, in that case, some thought would need to be put into how the menu and content areas share space on narrow, small device screens.

The code:

<style>
.layout-app-example.container {
  width: 100%;
  height: 400px;
  display: grid;
  grid-template-areas:
    "header header"
    "menu main"
    "footer footer";
  grid-template-columns: 30% auto;
}

.layout-app-example .header {
  grid-area: header;
  background-color: yellow;
  height: 4em;
}

.layout-app-example .menu {
  grid-area: menu;
  background-color: green;
  overflow: auto;
}

.layout-app-example .main {
  grid-area: main;
  overflow: auto;
}

.layout-app-example .footer {
  grid-area: footer;
  background-color: #333;
  height: 7em;
}

.layout-app-example .fake-text-block {
  background-color: #ccc;
  margin: .5em 1em;
  height: 1em;
  border-radius: 1em;
}

.layout-app-example .menu .fake-text-block {
  margin-top: 1.25em;
  font-size: 1.5em;
  background-color: #fefefe;
}

.layout-app-example .main .fake-text-block {
  margin-top: 1em;
}

.layout-app-example .main .fake-text-block:first-child {
  font-size: 2em;
  background-color: #333;
  width: 70%;
  margin-left: calc(1em / 2);
  margin-bottom: 1em;
}

.layout-app-example .main .fake-text-block:last-child {
  margin-bottom: 4em;
}
</style>
<div class="layout-app-example container">
  <!-- Could use <header> tag, but this is presentational -->
  <div class="header"></div>
  <!-- Could use <nav> tag, but this is presentational -->
  <div class="menu">
    <!-- This line is repeated many times. I guess a CSS background could have accomplished the same effect. -->
    <div class="fake-text-block"></div>
  </div>
  <!-- Could use <main> tag, but this is presentational -->
  <div class="main">
    <!-- This line is repeated many times. -->
    <div class="fake-text-block"></div>
  </div>
  <!-- Could use <footer> tag, but this is presentational -->
  <div class="footer"></div>
</div>