title: CSS unwanted white space at bottom
body: <p><strong>Context:</strong> 
  I am making a website where the white bit running down the middle (the 'wrapper' div) is supposed to be the background for all the content on the page, whereas the red bit (the 'body') running down the sides operates as a border. If I get rid of the 100% bottom-padding from the 'wrapper' div, the content I have on my website ends up with a background of red (background of the 'body' instead of the 'wrapper'). Nevertheless, if I have the 100% bottom-padding on the 'wrapper' div I can scroll further than the bottom of the page (all my content fits on one page at the moment, whereas I can scroll for at least two pages).</p>
  
  <p>Please accordingly explain how I can keep the content's background as the wrapper div without the scrolling ability going beyond the end of the content. For example, in the code presented, there should be no ability to scroll down beyond the first screen because there is no content. The amount I can scroll on the code presented is the same as the amount I can scroll on my website.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Bob&lt;/title&gt;
  
  &lt;meta charset="utf-8" /&gt;
  &lt;meta http-equiv="Content-type" contents="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width, initial scale=1" /&gt;
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  
  
  &lt;style&gt;
  
  body {
  height: 100%;
  background-color:red;
  margin:0 auto;
  }
  
  #wrapper {
  width:600px;
  height: 100%;
  margin:0 auto;
  background-color: white;
  padding-top:8px;
  padding-bottom:100%;  /* removed and white space at bottom removed */
  padding-left: 20px;
  padding-right:20px;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="wrapper"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>