title: DIV: full height + scroll
body: <p>I want to have a DIV with:</p>
  
  <ol>
  <li>The height = all availbale size </li>
  <li>Vertical scroll for my content</li>
  </ol>
  
  <p>I can do 1) or 2), but both requirements doesn't work correctly for me.</p>
  
  <p>He is my HTML:</p>
  
  <pre><code>&lt;div class="FixedHeightContainer"&gt;
    &lt;div class="Content"&gt;
       ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is CSS:</p>
  
  <pre><code>.FixedHeightContainer
  {   
      height: 100%;   
      padding:3px; 
      background:#f00;
  }
  .Content
  {
      height: 100%;
      overflow:auto;
      background:#fff;
  }
  </code></pre>
  
  <p>Here is the jsfiddle: <a href="https://jsfiddle.net/demas/9jLayt3v/" rel="noreferrer">https://jsfiddle.net/demas/9jLayt3v/</a></p>
  
  <p>In this version the Content is bigger then available height (look at red border at the bottom).</p>
  
  <p>I can set height = 300px and in this case I will have the correctly working scroll, but the height of the Content will be the same for all screen sizes.</p>
  
  <p>How can I make the Content.Height = all avaliable size and Scroll for it content? </p>
  
  <p>Or by other words: i need to have red border equal the browser size and scroll inside the red border</p>