html/css 포지셔닝 - 페이스 북과 유사

Question

"header"div 위치를 고정 시켰습니다 : 고정되었지만 이제는 회색과 오렌지색 div가 헤더 div 바로 아래에서 시작하는 대신 맨 위로 이동했습니다.

나는 다른 내가 div의이 100 %가되고 싶어요,이 텍스트가 화면을 통과하지 못한 내 회색과 오렌지 된 div가 헤더 경우 후 페이지 높이 의 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

당신은 div의 헤더

margin-top:50px; 

아래 오는 오렌지와 만드는 회색 DIV이 css을 추가 할 수 있습니다 그런 다음 div 높이를 텍스트 높이와 동일하게하려면

height:auto; 

이제 DIV 장치 높이의 100 % 이상이 사용할 수 없도록하려는 경우이 지원해야 않는 브라우저

max-height:100%;