* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
}

.page-container {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-areas:
    "nav"
    "header"
    "content";
  grid-template-rows: auto auto 1fr;
  padding: 1rem;
}

button, a {
  outline: none;
  border: 1px solid green;
  background: mediumspringgreen;
  width: 100%;
  padding: 0.2em 0.4em;
  cursor: pointer;
  text-decoration: none;
  color: #222;
}

button:hover, a:hover {
  background: lightgreen;
}

.nav {
  grid-area: nav;
  margin: 1rem;
}

.nav a {
  margin: 0 1em 0 0;
}

.header {
  grid-area: header;
  border-bottom: 1px solid #aaa;
  padding-bottom: 1rem;
}

.content {
  grid-area: content;
  height: 100%;
  overflow: auto;
  padding-bottom: 1rem;
}