title: How can I make an empty div display between the header and footer?
body: <p>I am trying to create an empty <code>div</code> between my <code>header</code> and my <code>footer</code>, as my webpage has a <code>background image</code> which I would like to be clear of any elements.</p>
  
  <p>The full code is <a href="https://jsfiddle.net/Cilvako/4105a0oy/" rel="nofollow">here</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>* {
    box-sizing: border-box;
  }
  html {
    font-size: 16px;
    background: url('http://placekitten.com/200/300') no-repeat fixed center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  /*-------------- HEADER -----------------------*/
  
  a {
    text-decoration: none;
    color: black;
  }
  #header h1 {
    font-family: "Frijole", cursive;
    float: left;
    padding-left: 20px;
  }
  #header ul {
    font-family: "Frijole", cursive;
    float: right;
    padding: 20px 20px 0 0;
    display: inline-block;
  }
  #header ul,
  li {
    display: inline-block;
    margin-bottom: 5px;
  }
  /*-------------- EMPTY DIV -----------------------*/
  
  #empty_div {
    height: 800px;
  }
  /*-------------- FOOTER -----------------------*/
  
  #footer {
    clear: both;
    padding-left: 20px;
    text-align: center;
  }
  #footer p {
    margin: 5px 0;
  }
  .social_icon {
    display: inline;
    width: 1.25rem;
    height: 1.25;
    margin-right: 0.3215rem;
    margin-bottom: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
  
    &lt;a href="index.html" id="logo"&gt;
      &lt;h1 class="headings"&gt;THE 100 DAYS PROJECT&lt;/h1&gt;
  
    &lt;/a&gt;
  
  
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="new_treehouse.html" class="selected"&gt;Portfolio&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  
  &lt;div id="empty_div"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
    &lt;a href="http://twitter.com/cilvako"&gt;
      &lt;img src="http://placekitten.com/200/300" alt="Twitter Logo" class="social_icon"&gt;
    &lt;/a&gt;
    &lt;a href="http://facebook.com/"&gt;
      &lt;img src="http://placekitten.com/200/300" alt="Facebook Logo" class="social_icon"&gt;
    &lt;/a&gt;
  
    &lt;p&gt;&amp;copy; 2016 Silvia Bogdan&lt;/p&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can I make the empty <code>div</code> to display and take the whole <code>height</code> of the page (so it creates empty space between the <code>header</code> and the <code>footer</code>)?</p>
  
  <p>I have set a value (<code>min-height: 800px</code>, for example), but when resizing the browser (I tried displaying on different devices using Developer Tools), the <code>footer</code> it's placed all over the place and never at the of bottom of the page.</p>