title: Gradient background with a sticky footer
body: <p>I'm trying to add a gradient to the body background which starts from white and ends in grey at the bottom of the page. Since the page has a sticky footer, when the content is bigger than the browser window, the body doesn't stretch/expand with the content. So the gradient stops in the middle. Can someone please help? </p>
  
  <p><strong>HTML :</strong></p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div class="content"&gt; &lt;/div&gt;
          &lt;div class="footer"&gt; &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS :</strong></p>
  
  <pre><code>html {
      height:100%;
  }
  body { 
      height:100%;
      background: -moz-linear-gradient(top, #fff 0%, #d5d6db 100%);
  }
  .content {
      min-height: 100%;
  }    
  .footer {
      height: 55px;
  }
  </code></pre>