title: Variable sized banner and content under it with scroll
body: <p>this is what I want:</p>
  
  <p><a href="http://jsfiddle.net/txvxJ/" rel="nofollow">http://jsfiddle.net/txvxJ/</a></p>
  
  <pre><code>&lt;div style="position: fixed; overflow: scroll; bottom: 0; left: 0; right: 0; top: 0px; background: red;"&gt;a&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;br /&gt;1&lt;/div&gt;
      &lt;div style="position: fixed; top: 0; left: 0; right: 0; height: height: auto; background-color: yellowgreen;"&gt;&lt;img src="http://prog.hu/site/images/logo.gif" width="100%" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>the only problem is, the red content goes under the banner, thats wrong. How to fix this?</p>