2012-05-27 3 views
0

나는 position:absolute; 인 종류의 창을 만들고 있습니다. here on jsbin '창'알 수 있듯이"fill"요소 사용 가능 높이

는 제목 표시 줄과 그 내용을 가지고 다음과 같이

<div class="l"> 
<div class="t"> 
<h4>Title</h4> 
</div> 
<div class="x"> 
    <!--contents--> 
</div> 
</div> 

내 스타일

은 다음과 같습니다

내가 DIV x을하고 문제가 있어요 무엇
div.l{position:absolute;background:#aaf;width:70%;height:200px;padding:1em;} 
div.t{padding:1px;background:#af9;} 
div.x{padding:1em;background:#a87;height:100%;overflow:auto;} 

사용 가능한 공간을 모두 차지하고 overflow:auto;을 스크롤 영역으로 가져옵니다. 사업부 l 내가 그것을 overflow:auto;을 적용하고 스크롤 영역하지만 전체 제목, div.t을 가질 수 명확한 크기를 가지고 있기 때문에

seen here뿐만 아니라 스크롤합니다.


나는 내가 그것을 overflow:auto;을 사용할 수있는 바닥 1em 패딩 때까지 남아있는 공간을 채우기 위해 DIV x이 필요합니다.

div.x을 절대 배치하지 않으면이 작업을 수행 할 수 있습니까? 또는 최소한 div.t의 높이를 몰라도?

답변

0

나는 대답이 '아니오'가되었으므로 이제 나머지 숫자를 채우기 위해 div.x을 얻을 수 없다고 생각합니다.

어쩌면 CSS3 flexbox가이를 수행 할 수 있지만, 질문했을 때 그 범위를 벗어난 것이므로 아마도 별도의 질문에 속할 것입니다.

0

높이를 div.t으로 설정 한 경우에만 가능하다고 생각합니다. 여기에 샘플이 있습니다 : http://jsfiddle.net/gmncc/

+0

그런 다음 div 'l'에서 패딩을 제거하십시오. 예를 들어, 제가 생각한 것처럼, 또는 언급했듯이 절대 위치 지정을 사용합니다. 누군가가 우리 모두를 잘못 증명할 수 있기를 바랍니다! :) – Hawken