page header footer using flex spec

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        font-family:Arial, Sans-serif;
        padding:0px;
        font-size: 1em;
      }
      .flex-page-grid {
        display: flex;
        flex-flow: column;
        height: 100%;
      }
      #div-header, #div-footer{
          background-color: #dedede;
      }
      .flex-page-grid .flex-page-row {
        border: 1px solid #dedede;
      }
      #div-tabs-nav {
        flex: 0 1 auto;
      }
      #div-content {
        flex: 1 1 auto;
        background-color: #ffffff;
      }
      #div-footer {
        flex: 0 1 40px;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <div id='div-tabs-nav' class="flex-page-grid">
      <div id='div-header' class="flex-page-row">
        [HEADER]
        <p>Sed elementum volutpat felis id accumsan. Fusce sed turpis fermentum mi auctor vulputate. Vivamus in fermentum enim. Nullam et tellus neque. In fringilla mauris in magna mollis cursus. Sed semper ut lacus ac lacinia. Cras vel porttitor sapien. Vivamus iaculis id lectus vitae facilisis. Quisque at molestie sem, sed varius diam. Phasellus eget venenatis neque. Fusce rhoncus neque et nisi laoreet elementum. Etiam molestie, felis vel ultrices molestie, mi enim efficitur est, nec sagittis nisl turpis a libero. Sed vitae felis tempor, aliquet ligula sed, porttitor nisl. Suspendisse placerat faucibus erat quis sagittis. Nullam bibendum massa quam, eget sodales est vehicula eget. Phasellus eget placerat ex, nec pellentesque est.</p>
      </div>
      <div id='div-content' class="flex-page-row">
        [main content]
      </div>
      <div id='div-footer' class="flex-page-row">
        [FOOTER]
      </div>
    </div>
  </body>
</html>