DIV: full height + scroll

Question

I want to have a DIV with:

1. The height = all availbale size
2. Vertical scroll for my content

I can do 1) or 2), but both requirements doesn't work correctly for me.

He is my HTML:

<div class="FixedHeightContainer">
  <div class="Content">
     ...
  </div>
</div>

Here is CSS:

.FixedHeightContainer
{   
    height: 100%;   
    padding:3px; 
    background:#f00;
}
.Content
{
    height: 100%;
    overflow:auto;
    background:#fff;
}

Here is the jsfiddle: https://jsfiddle.net/demas/9jLayt3v/

In this version the Content is bigger then available height (look at red border at the bottom).

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.

How can I make the Content.Height = all avaliable size and Scroll for it content?

Or by other words: i need to have red border equal the browser size and scroll inside the red border

Answer 1

Dont forget the viewport.

In your example, I just added the following line:

html, body { height: 100%; }