html/css positioning -- like facebook

Question

I made my "header" div position: fixed, but now my gray and orange divs moved up to the top instead of starting right under the header div.

I want my gray and orange divs to be 100% of the page height after the header if there the text doesn't pass the screen, else I want the divs to be 100% of the text height. (example in jsfiddle)

How can I make this possible?

#header {
position: fixed;
background-color: #a6c7ec;
height: 50px;
width: 100%;
top: 0px;
float: top;
opacity: 0%;

}

Here is my jsfiddle: http://jsfiddle.net/xwwo2deq/

Answer 1

You can add this css to the orange and gray div to make the divs come below the header

margin-top:50px;

Then to make the div height the same as the height of the text do this

height:auto;

Now if you don't want the div to be more than 100% of the device height use this

max-height:100%;