title: How to ensure a webpage's content extends to the bottom of a webpage using only CSS
body: <p>I have seen very similar questions on Stackoverflow regarding this issue but I have yet to find a solution that works for my scenario. As stated in the title I am looking for an only CSS solution and would prefer to avoid Javascript. </p>
  
  <p>My issue is that I cannot figure out how to create a content box on a webpage that extends from the header of the page to the bottom of the page. The reason I am looking to extend this content box is to have a picture fill the background of the content box on the landing page of my website. I have tried two different techniques and neither one has worked correctly. I have attached both tests with fiddles  below: </p>
  
  <p>Scenario One - Have a wrapper that extends the pages with the header and content within the wrapper.</p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="wrapper"&gt;
    &lt;header&gt;
  
    &lt;/header&gt;
    &lt;div id="content"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body { 
      padding: 0px;
      margin: 0px;
      min-width:1124px;
      height: 100%;
      min-height: 100%;
      width: 100%;
      border: 3px solid black;
  }
  wrapper {
      min-height:100%;
      border: 3px solid blue;
      position:relative;
      padding:0;
      margin:0;
  }
  
  header {
      height: 155px;
      width: 100%;
      padding: 0px;
      margin: 0px;
      border-bottom: 1px solid black;
  
      /*Top Gradient Defined*/
      background: #ffc578; /* Old browsers */
      background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
  }
  
  #content {
      width: 100%;
      min-width: 1100px;
      position: relative;
      margin-right:auto; 
      margin-left:auto;
      min-height: 100%;
      height:100%;
      padding:0;
      border: 5px solid red;
      background-color:black;
      background-size:cover;
      position: relative;
  }
  </code></pre>
  
  <p>Fiddle for Scenario 1: <a href="http://jsfiddle.net/tPNB4/5/" rel="nofollow">http://jsfiddle.net/tPNB4/5/</a></p>
  
  <p>As you can see the content div will only expand to the length of the content and no the entire length of the wrapper div. </p>
  
  <p>Scenario Two: Have the content sit below the header div. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header&gt;
  
  &lt;/header&gt;
  &lt;div id="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>html, body { 
      padding: 0px;
      margin: 0px;
      min-width:1124px;
      height: 100%;
      min-height: 100%;
      width: 100%;
      border: 3px solid black;
  }
  
  
  header {
      height: 155px;
      width: 100%;
      padding: 0px;
      margin: 0px;
      border-bottom: 1px solid black;
  
      /*Top Gradient Defined*/
      background: #ffc578; /* Old browsers */
      background: -moz-linear-gradient(top,  #ffc578 0%, #fb9d23 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* Opera 11.10+ */
      background: -ms-linear-gradient(top,  #ffc578 0%,#fb9d23 100%); /* IE10+ */
      background: linear-gradient(to bottom,  #ffc578 0%,#fb9d23 100%); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); /* IE6-9 */
  }
  
  #content {
      width: 100%;
      min-width: 1100px;
      position: relative;
      margin-right:auto; 
      margin-left:auto;
      min-height: 100%;
      height:100%;
      padding:0;
      border: 5px solid red;
      background-color:black;
      background-size:cover;
      position: relative;
  }
  </code></pre>
  
  <p>Fiddle for scenario 2 - <a href="http://jsfiddle.net/6MGrh/2/" rel="nofollow">http://jsfiddle.net/6MGrh/2/</a></p>
  
  <p>As you can see the content box extends past the length of the page and generates the scroll bar. </p>
  
  <p>If anyone could provide some guidance on why neither of these scenarios is working that would be greatly appreciated. </p>