테이블 셀은 높이 : 100 %로 설정됩니다. IE에서는 테이블 행 대신 테이블의 높이를 100 %로 설정합니다.

Question

3 행이있는 테이블이 있습니다. 처음부터 끝까지 높이 설정. 가운데 하나는 남은 모든 공간을 차지해야합니다. 그 행 안에는 세 개의 셀이 있습니다. 각 테이블 행과 높이가 같아야합니다.

빠른 예제는 여기에 있습니다 : http://jsbin.com/hidibate/3/edit

그것은 크롬/FF에서 작동하지만 IE에서 스크롤이 나타납니다. 셀이 행 대신 테이블의 높이를 100 %로 설정하는 것처럼 보입니다. jsbin이 유효하지 않은 경우

출처 :

이

HTML :

<div id="o"> 
    <div id="sc"> 
     <div id="rc"> 
      <table> 
       <tr id="f"> 
        <td>foo</td> 
       </tr> 
       <tr id="m"> 
        <td> 
         <div id="i">Fooo</div> 
        </td> 
       </tr> 
       <tr id="l"> 
        <td>bazz</td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div>  

CSS :

#o { 
    background-color:red; 
    width: 500px; 
    height:360px; 
    position:relative; 
} 

#sc{ 
    height:100%; 
    width:100%; 
    position:relative; 
    overflow:auto; 
} 

#rc{ 
    height:100%; 
    width:100%; 

} 
table { 
    height:100%; 
    width:100%; 
    border-collapse:collapse; 
    padding:0; 
    border:none; 
    empty-cells:show; 
    overflow:hidden; 
} 
#f { 
    height:20px; 
    background-color:blue; 
} 
#l { 
    height:30px; 
    background-color:green; 
} 
#m { 
    background-color:yellow; 
} 
#m td { 
    position:relative; 
} 
#i { 
    height:100%; 
    width:100%; 
    background-color:orange; 
} 

Answer 1

#m { 
    background-color:yellow; 
    height:100%; 
    width:100%; 
} 

이이