Untitled

<body>
 <div class="wrapper">
  <header>
   header
  </header>
  <main class="data">
   data
  </main>
  <footer>
   footer
  </footer>
 </div>
</body>

html, body {
    width: 795px;
    height: 100%;
    margin: 0 auto;
  }

  .wrapper {
    min-height: 100%;
    position: relative;
    background-color: #d7ffd4;
    border: 1px solid gray;
  }

  header {
    height: 50px;
    width: 100%;
    background-color: pink;
  }

  .data {
    height: 100%;
    background-color: blue;
    border: 1px solid black;
  }

  .wrap {
    height: 100%;
    background-color: #7892ff;
  }

  footer {
    width: 795px;
    height: 50px;
    position: absolute;
    bottom: 0;
    background-color: yellow;
    border: 1px solid green;
  }

min-height: calc(100vh - 50px);