요소 안에 사용 가능한 높이를 모두 맞추는 방법

Question

여기는 example on JSFiddle입니다. 코드 발췌 :

<table style="height:100%"> 
    <tr height="20"><td></td></tr> 
    <tr> 
     <td>This gray cell fits all available height of table</td> 
    </tr> 
    <tr height="20"><td></td></tr> 
</table> 

3 개의 행이있는 테이블이 있습니다. 중간에있는 행은 사용 가능한 모든 테이블 높이에 맞 춥니 다. 이 솔루션을 here에서 가져 왔습니다.

중간 셀에 오버 플로우 -y를 만들 수 없다는 문제가 있습니다. 중간 셀의 높이가 콘텐츠의 높이와 같다고 여겨집니다. 어떻게하면 스크롤링 (overflow-y : auto)을 켜는 것이 가능하고 div에서이 레이아웃을 구현하는 방법이 없다면?

UPD. 감사. 이 예제는 작동하는 것 같습니다 : http://jsfiddle.net/haGWe/6/ div를 사용하여 구현하는 방법은 여전히 ​​흥미 롭습니다.

Answer 1

Here 그 것이다.

기본적으로 td 요소 안에 div를 추가하고 고정 높이 (내가 선택한 20px) 및 overflow: auto을 추가하십시오.

Answer 2

중간 행의 내용을 div에 감싸고 div에 CSS를 적용하십시오.

<div class="widget"> 
<table cellpadding="0" cellspacing="0"> 
    <tr class="widget-header"> 
     <td>20 px above</td> 
    </tr> 
    <tr class="widget-content"> 
     <td><div id="myDiv">This gray cell fits all available height of table. What happens when more text is added to this? Woot, scrolls bars.</div></td> 
    </tr> 
    <tr class="widget-footer"> 
     <td>20 px below</td> 
    </tr> 
</table> 
</div> 

.widget{ 
    position:absolute; 
    min-width:200px; 
    width:200px; 
    outline:1px solid gray; 
    right:50%; 
    top:20px; 
} 
.widget > table{ 
    height:100%; 
    width:100%; 
} 
.widget-header{ 
    height:20px; 
} 
.widget-content{ 
    vertical-align:top; 
    background:gray; 
} 
.widget-footer{ 
    height:20px; 
} 
#myDiv 
{ 
    height:40px; 
    overflow-y:scroll; 
} 

http://jsfiddle.net/2YvG6/