title: Background does not fill whitespace at the bottom of page when using min-height
body: <p>The last media query (Resolution: 529x266) makes each of my blocks ("Work, About, Hire") have a min-height. But my background does not fill in the extra space. How do I make my background fill the extra space?
  To see the white space make the codepen 529x266 or smaller.</p>
  
  <p><a href="https://codepen.io/anon/pen/QpVBGZ" rel="nofollow noreferrer">https://codepen.io/anon/pen/QpVBGZ</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {height: 100%; font-size: 100%;}
  body {
    height: 100%;
    font-size: 1rem;
  }
  * {
    margin: 0;
    border: 0;
    box-sizing: border-box;
  }
  
  section {
    display: flex;
    height: 100%;
    width: 100%; 
    background: url("https://images.unsplash.com/photo-1483914764278-6f2b1e39bba5?dpr=1&amp;auto=format&amp;fit=crop&amp;w=1500&amp;h=1377&amp;q=80&amp;cs=tinysrgb")no-repeat; 
    background-size: 100% 100%;
  }
  .work, .about, .hire {
    display: flex;
    height: 100%;
    width: 33.3%;
    opacity: 0.7;
    justify-content: center;
    align-items: center;
  }
  .opacity {
    height: 100%;
    width: 100%;
    background: #000000;
    z-index: 100;
  }
  span {
    position:absolute; 
    height:100%;
      width: 33.3%;
  }
  /* Text */
  p {
    position: absolute;
    font-size: 5em;
    font-weight: 900;
    font-family: 'Teko', sans-serif;
    text-transform: uppercase; 
    text-align: center;
  }
  a {
    color: #fff;
    text-decoration: none;
  }
  /* Hover */
  .opacity:hover {
    opacity: 0;
  }
  .work:hover, .about:hover, .hire:hover {
    opacity: 1;
  }
  
  
  /* Media Queries */
  /* 529px at 16px */
  @media only screen and (max-width: 33.0625em) {
    section {
      display: flex;
      flex-direction: column;
    }
    .work, .about, .hire {
      height: 33.3%;
      width: 100%;
    }
    span {
      height: 33.3%;
      width: 100%;
    } 
  }
  /* 266px at 16px */
  @media only screen and (max-height: 16.625em) and (max-width: 33.0625em) {
    section {
      display: flex;
      flex-direction: column;
    }
    .work, .about, .hire {
      min-height: 38.3%;
      width: 100%;
    }
    span {
      min-height: 38.3%;
      width: 100%;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section&gt;
    &lt;div class="work"&gt;
      &lt;div class="opacity"&gt;
        &lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;p&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="about"&gt;
      &lt;div class="opacity"&gt;
        &lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;p&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="hire"&gt;
      &lt;div class="opacity"&gt;
        &lt;a href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;p&gt;&lt;a href="#"&gt;Hire&lt;/a&gt;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>