title: How to make this content div 100% of available height?
body: <pre><code>//// html ////
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;div class="page"&gt;
          &lt;div class="menu"&gt; menu &lt;/div&gt;
          &lt;div class="content"&gt; {% block content %}{% endblock %}&lt;/div&gt;
          &lt;div class="footer"&gt; footer &lt;/div&gt; 
      &lt;/div&gt;
  &lt;/body&gt;
  
  
  //// css ////
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>html, body {
  background: black;
  height: 100%;
  margin: 0;
  
  }
  
  .page {
  min-height: 100%;
  position: relative;
  }
  
  .menu {
  background: #ff0000;
  height: 100px;
  }
  
  .content {
  padding-bottom: 75px;
  background: #00ff00;
  }
  
  .footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 75px;
  background: #0000ff;
  }
  </code></pre>
  
  <p>Output:</p>
  
  <p><img src="https://i.stack.imgur.com/PK2mX.png" alt="enter image description here"></p>
  
  <p>I'll give you a link to jsFiddle but it isn't working properly (not the same as in my browser) - <a href="http://jsfiddle.net/t3Gjx/3/" rel="nofollow noreferrer">http://jsfiddle.net/t3Gjx/3/</a> 
  I need to get rid of black gaps, no matter how long is the content in green field (content field). I was trying with </p>
  
  <pre><code>min-height = 100%
  </code></pre>
  
  <p>in .content but with no success. </p>