title: Bootstrap Div height keeps going by content size
body: <p>I'm trying to make a website with Twitter Bootstrap, that is basically a single, vertically centered column on top of a background container div (so I can color / image the background on the edges). </p>
  
  <p>I keep having this issue where I can get the background div to fill the enter screen, but the centered column div sets its height to the size of the content. I want it to always, at least, be as tall as the screen size. I thought min-height would do this, but it does not.</p>
  
  <p>Here's what it looks like right now: (it's just a test page for the layout)</p>
  
  <p><img src="https://i.stack.imgur.com/4FUvI.png" alt="enter image description here"></p>
  
  <p>Here is the code for it:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Baileysaurus -- Dinosaurs &amp;amp;&amp;amp; Logic in your face!&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link href="/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet"&gt;
      &lt;LINK href="header.css" rel="stylesheet" type="text/css"&gt;
      &lt;LINK href="forum.css" rel="stylesheet" type="text/css"&gt;
      &lt;!-- jQuery (Bootstrap requires jQuery!) --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;LINK href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
          media="screen"&gt;
  
          &lt;!-- A file of PHP utility functions --&gt;
          &lt;?php
              include 'functions.php';
          ?&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;div id='background' class='row-fluid'&gt;
          &lt;div class='span12'&gt;
              &lt;div id='site-column' class='row-fluid span10 offset1 column-wrap'&gt;
  
                             &lt;img src="/PipeDog.jpg" alt="ARGUMENT INVALID" /&gt;
  
                         &lt;hr&gt;
  
                         &lt;p&gt;
                          Put a blog here!
                         &lt;/p&gt;
  
              &lt;/div&gt; &lt;!-- END of outermost span12 div --&gt;
          &lt;/div&gt; &lt;!-- END - "site-column" div --&gt; 
      &lt;/div&gt;  &lt;!-- END - "background" div --&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;  
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>html, body
  {
      height: 100%;
      margin: 0;
  }
  
  #background
  {
      position: absolute;
      top:0;
      bottom: 0;
      min-height: 100%;
      min-width: 100%;
      background-color: Gainsboro;
  }
  
  #site-column
  {
      top: 0;
      bottom: 0;
      min-height: 100%;
      border-left: 2px solid;
      border-right: 2px solid;
      background-color: white;
  }
  .column-wrap
  {
      overflow: hidden;
  }
  </code></pre>
  
  <p>I'm trying to get the white column in that photo to stretch to the bottom of the screen, at least, even if the content is not that long.
  Anyone have any ideas on what I'm missing?</p>