<!-- Header -->
  <header id='header'> <!-- Table Row 1 -->
    <div id="header-table">
      <div id='back'>
        <button id='back-button'>&#8592;</button>
      </div>
      <div id="title">
        <h1 id='title-h1'>Title</h1>
      </div>
      <div id="menu">
        <button id='menu-button'>&equiv;</button>
      </div>
    </div>
  </header>

    <nav id="menu-nav">
      <a href="#intro">Introductory Page</a>
      <a href="#list">Activity List</a>
      <a href="#settings">Settings</a>
      <a href="#about">About</a>
    </nav>

  <div id="body"> <!-- Table Row 3 -->

    <div id="wrapper">

header#header {
  position: relative;
  display: table-row;
}

div#menu-nav-cell {
  position: relative;
  display: table-row;
  text-align: center;
  overflow: hidden;
  background: yellow;
}

nav#menu-nav {
  display: table-row;
  height: 0em;
  width: 100%;
  color: #000;
  background: pink;
}


div#body {
  position: relative;
  display: table-row;
  height: 100%;
}

div#wrapper {
  position: relative;
  height: 100%;
}