div 높이 조정

중간에있는 내용 div가 그 사이의 영역을 채우는 동안 헤더 div와 바닥 글 div가 페이지의 상단과 하단에 각각 뿌리를두고 있어야하는 설정이 있습니다. 콘텐츠 div는 overflow : auto로 설정됩니다. 콘텐츠 볼륨이 충분히 클 때 스크롤 막대가 나타납니다. 이런 식으로 뭔가 :div 높이 조정

+----------------------------------------------+     <- 
|header div with fixed height of 90px   |     | 
+----------------------------------------------+     | 
|content div with variable height    ||     | 
|            || <-scroll bar  | 
|            || (if required) | 
|            ||     |- total window height 
|            ||     | 
+----------------------------------------------+     | 
|footer div with fixed height of 60px   |     | 
+----------------------------------------------+     <-

는 혼자 컨텐츠 사업부는 세 가지의 조합이 전체 창을 기입하는 방식으로 높이를 변경하고 싶습니다. CSS만으로도 가능합니까? 감사.

(현재 머리글과 바닥 글 div의 위치가 : 고정을하고, 내용이 높이가 있습니다. 100 %,하지만 그것은 끔찍한 모양)

출처

2009-12-14 mathon12

서식이 엉망인 것 같습니다. 죄송합니다. – mathon12

^고마워. – mathon12

당신은 위치를 사용하여 수행 할 수 있습니다 이것에 대한 IE의 지원이 아니지만, 고정을 큰.

<html> 
    <head> 
     <style> 
#header { position: fixed; top: 0px; left: 0px; width: 100%; height: 90px; } 
#footer { position: fixed; bottom: 0px; left: 0px; width: 100%; height: 60px; } 
#content { position: fixed; width: 100%; height: auto; top: 90px; bottom: 60px; overflow: auto } 
     </style> 
    </head> 
    <body> 
     <div id="header">Header</div> 
     <div id="content"> 
      <p>Content</p> 
      <p>Content</p> 
      ...etc... 
      <p>Content</p> 
     </div> 
     <div id="footer">Footer</div> 
    </body> 
</html>

다른 예를 포함하여 자세한 내용은 here을 참조하십시오 여기에 사용할 수 있습니다 뭔가.

출처

2009-12-14 20:20:04

이봐, 그건 완벽하게 작동하는 것 같다! 감사! 사용 위치 : 고정; 모두를 위해 꽤 깔끔한, 비록 지금은 IE에서 그 순간에 일하고 있지 않다 :) – mathon12

나는 그것이 IE8에서 지금 작동한다고 생각한다. – WilliamLou

div 높이 조정

답변

관련 문제