title: Filling content background till it reaches footer
body: <p>I have similar problem which can be found <a href="https://stackoverflow.com/questions/15453972/layout-footer-100-width-and-content-till-footer">here</a>. But i couldn't make it work or i didnt understand it fully.</p>
  
  <p>My problem which im trying to resolve is - I want my content background to reach footer even if there isnt enough content to be displayed. I created a simple fiddle which can be found <a href="https://jsfiddle.net/vj07e8g1/" rel="nofollow noreferrer">here</a>. As you can see there isnt enough content to reach footer and there is this "blue" space between content and footer. I would like to make that space grey.</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;div class=blue&gt;header here&lt;/div&gt;
  &lt;p&gt;LOGO here&lt;/p&gt;
  &lt;div class="blue"&gt;navigation bar here&lt;/div&gt;
    &lt;div class="content"&gt;
  No content.
    &lt;/div&gt;
  &lt;div class="footer"&gt;footer is here&lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.blue {
      color: #ffffff;   
      background-color: #294a70;
      display: block;
      float: none;
      width: 400px;
      margin: 0 auto;
      text-align: center;
  }
  p {
     text-align: center;
     color: #ffffff;
     }
  .content {
      background-color: #e6e6e6;
      display: block;
      float: none;
      margin: 0 auto;
      overflow:hidden;
      width:400px;
      margin-bottom:30px; 
  }
  .footer {
      color: #ffffff;   
      background-color: #294a70;
      display: block;
      float: none;
      width: 400px;
      margin: 0 auto;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height:30px;
  }
  body {
      margin:0;
      padding:0;
      font-family: 'Open Sans', sans-serif;
      line-height: 1.5;
      font-size: 14px;
      overflow-x:hidden;
      background-image:url('http://www.planwallpaper.com/static/images/Alien_Ink_2560X1600_Abstract_Background_1.jpg');
      min-height: 100%;
  }
  html {
      position:relative;
      min-height: 100%;
  }
  </code></pre>
  
  <p>All help will be appreciated!</p>