CSS 오버 플로우 상자 높이

Question

는 어떻게 만들 수 100 % 내용과 헤더 사이 '스크롤 박스'적합 : http://jsfiddle.net/LDXhf/5/

(보너스 포인트가 IE6에서 작동하는 경우)

CSS :

#main { 
    position: relative; 
    height: 200px; 
    background-color: yellow; 
} 

#header { 
    background-color: blue; 
    text-align: center; 
} 

#footer { 
    position : absolute; 
    bottom : 0; 
    left: 0; 
    width: 100%; 
    background-color: blue; 
    text-align: center; 
} 

#content { 
    background-color: white; 
} 

#scrollbox { 
    background-color: red; 
    overflow: auto; 
    height: 100%; 
} 

HTML :

<div id="main"> 
    <div id="header"> 
     HEADER 
    </div> 

    <div id="content"> 
     CONTENT 
    </div> 

    <div id="footer"> 
     FOOTER 
    </div> 

    <div id="scrollbox"> 
     DATA1<br/> 
     DATA2<br/> 
     DATA3<br/> 
     DATA4<br/> 
     DATA5<br/> 
     DATA6<br/> 
     DATA7<br/> 
     DATA8<br/> 
     DATA9<br/> 
     DATA10<br/> 
     DATA11<br/> 
     DATA12<br/> 
     DATA13<br/> 
     DATA14<br/> 
    </div> 
</div> 

Answer 1

당신은을 줄 필요 했어고정 된 height은 둘 사이에 맞습니다.

바이올린에서는 고정 된 높이가 있으므로 scollbox의 높이를 알 수 있습니다.

그러나 높이를 조정하면 CSS가 백분율이나 flexbox를 사용하지 않고 필요한 높이를 알 수 없으므로 문제가 발생합니다.

http://codepen.io/helion3/details/FAElH

트릭은 내부를 허용 한 후 머리글/바닥 글의 가장자리에 위치 것 래퍼를 사용하는 것입니다

나는 최근에 당신을 위해 일하는 것이 또 다른 질문에 대해 다음과 데모를했다 콘텐츠가 height: 100% 인 경우 브라우저가 콘텐츠 높이를 자동으로 자동 조정합니다.

Answer 2

이 방법이 최선의 방법은 아니지만이 트릭을 사용할 수 있습니다. 2014 년이

#footer { 
    position : absolute; 
    bottom : -60px; 
    left: 0; 
    width: 100%; 
    background-color: blue; 
    text-align: center; 
} 

Js Fiddle Demo