html/css positioning - like facebook

Question

Я сделал свою позицию заголовка «header»: исправлено, но теперь мои серые и оранжевые divs поднялись вверх, вместо того, чтобы начать прямо под заголовком div.

Я хочу, чтобы мои серые и оранжевые дивы быть 100% от высоты страницы после заголовка если там текст не проходит экрана, еще Я хочу дивы быть 100% от высота текста. (пример в jsfiddle)

Как я могу сделать это возможным?

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

}

Вот мой jsfiddle: http://jsfiddle.net/xwwo2deq/

Answer 1

Вы можете добавить css в оранжевый и серый DIV чтобы сделать дивы приходят под заголовком

margin-top:50px; 

Затем, чтобы высота div была такой же, как высота текста, сделайте это

height:auto; 

Теперь, если вы не хотите дел до более чем 100% от высоты устройства используют этот

max-height:100%;