title: Full-height CSS layout, with multiple columns
body: <p>I have a layout that is working, but it has one very annoying problem.. when the content is taller than the screen, the background stops.</p>
  
  <p>This is the desired layout in bad-ASCII-art format:</p>
  
  <pre><code>_____________________  _
  |    | long    |logo|   |
  |    | content |    |   |
  |    |         |    |   |
  |    |         |    |   |
  |grad|         |grad|   | Viewport
  |    |         |    |   |
  |    |         |    |   |
  |    |         |    |  _|
  |    |         |    |
  |    |         |    |
  _____________________
  
  |2em| &lt;-20em-&gt;| 2em|
  </code></pre>
  
  <p>..or with short content..</p>
  
  <pre><code>_____________________  _
  |    | short   |logo|   |
  |    | content |    |   |
  |    |         |    |   |
  |    |         |    |   |
  |grad|         |grad|   | Viewport
  |    |         |    |   |
  |    |         |    |   |
  |    |         |    |   |
  |    |         |    |   |
  _____________________  _|
  </code></pre>
  
  <p>Basically it looks like a single column, with a glow as a column either side. Over the left-glow is a logo. When the content is short, it is still the full-height.</p>
  
  <p>I have tried using the <a href="http://www.dustindiaz.com/min-height-fast-hack/" rel="nofollow noreferrer">CSS min-height hack</a>, which fixes the middle column, but then the gradients only extend as far as the content (in the left column, a single <code>&amp;nbsp;</code>, in the right column the logo)</p>
  
  <hr>
  
  <p>Here is what the layout looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/CVm4I.png" alt="Layout"></p>
  
  <p>And the problem (when the browser window is shrunk vertically):</p>
  
  <p><img src="https://i.stack.imgur.com/CVhOL.png" alt="Problem"></p>
  
  <p>Finally, the problem HTML/CSS, <a href="http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/" rel="nofollow noreferrer">http://data.dbrweb.co.uk/tmp/fifestock_layout_problem/</a></p>