title: css gradient background on <body> that stretches to 100% width and height
body: <p>So I'd like to have a gradient that fills 100% of the background of a webpage. For browsers that can't handle it, a solid color is fine.</p>
  
  <p>here is my current css:</p>
  
  <pre><code>html {
  height: 100%;
  }
  body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background: #afb1b4; /* Old browsers */
  background: -moz-linear-gradient(top, #afb1b4 0%, #696a6d 100%) no-repeat; /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#afb1b4), color-stop(100%,#696a6d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AFB1B4', endColorstr='#696A6D',GradientType=0 ); /* IE6-9 */
  background: linear-gradient(top, #afb1b4 0%,#696a6d 100%); /* W3C */
  }
  </code></pre>
  
  <p>It seemed to work out while the page had little content, but as I've filled out the page with more content, navigation, etcetera, there is now some white at the bottom. maybe 100px or so. Am I doing this wrong? Do I need to be offsetting some padding somewhere?</p>