IE에서 div의 iframe 채우기 남은 높이 만들기

Question

div div (height 및 iframe)을 알 수없는 div가 있습니다.

iframe은 부모의 남은 높이를 채우고 싶습니다 div. 필자가 찾은 유일한 방법은 IE를 제외한 모든 브라우저에서 작동하는 CSS 테이블을 사용하는 것입니다.

.container { 
    position: relative; 
    display: table; 
    height: 300px; 
    width: 200px; 
    text-align: center; 
} 

.top { 
    display: table-row; 
} 

.bottom { 
    /* changing this to table-row works correctly except the iframe no longer expands to the full height in IE */ 
    display: table-cell; 
    height: 100%; 
    background: blue; 
} 

iframe { 
    background:red; 
    height:100%; 
    height:100%; 
    position:relative 
} 

JSFiddle (사업부에 iframe이 변경됨) 비 IE 브라우저에서

: 이것은 CSS입니다

<div class="container"> 
    <div class="top"> 
     <div style="height: 100px; background: yellow">Top bar</div> 
    </div> 
    <div class="bottom"> 
     <iframe /> 
    </div> 
</div> 

:

이

은 내가 사용하고있어 HTML입니다 iframe은 나머지 공간을 채 웁니다. IE에서는 iframe 높이가 .container과 동일한 높이로 설정됩니다. 따라서 전체 높이는 .container의 높이와 .top의 높이가됩니다.

이 이미지는 조금 더 설명 할 수 있습니다

IE는 전체 테이블의 높이로 iframe 대응의 높이를 설정했지만 .top이 너무 높이가, 그것은 테이블이보다 큰이 될 수 있습니다 지정된 높이.

JS를 사용하지 않고이 문제를 해결할 수 있습니까? 그것은 확실히 사물이 자동으로 높이 중 하나를 변경하는 등

Answer 1

height:100%; auto을 시도하고 그