디스플레이 내부 100 % 높이 div : 표 셀 div

디스플레이 내부에 100 % 높이의 div를 넣으려고합니다. 표 셀 div이지만 Internet Explorer에서는 작동하지 않습니다. IE에 대한 해결 방법은 무엇입니까?디스플레이 내부 100 % 높이 div : 표 셀 div

<div style="display:table-row;"> 
    <div style="display:table-cell; background-color:blue; border-left:solid 1px #CCC;"> 
     <div style="position:relative; height:100%; width:100%; background-color:red;"> 
     </div> 
    </div> 
</div>

출처

2012-03-31 user1304988

이 사업부에 콘텐츠를 추가로드되는 모든 요소 전에 실행할 수 .ready 대로드 한 후

.load가 호출됩니다. 또는 최소 높이를 정의하십시오. –

부모 div의 높이와 폭이 설정되어 자동 :

여기 내 코드입니다. 빨간색 div를 보려면 부모 div의 높이와 너비를 초기화합니다.

<div style="display: table-row;"> 
    <div style="display: table-cell; background-color: blue; border-left: solid 1px #CCC;height:20px;width:30px;"> 
     <div style="position: relative; height: 100%; width: 100%; background-color: red;"> 

     </div> 
    </div> 
</div>

출처

2012-03-31 12:44:27

가득 차있는 부호에서 나는 다른 조정 고도 테이블 행이 있고 나는 테이블 높이의 나머지를 가지고 가기 위하여이 테이블 행을 필요로한다, 그래서 나는 고정 고도를 둘 수 없다. – user1304988

죄송합니다. 작동하지 않을 것 같습니다. 나는 답을 찾고자했지만 많은 사람들이이 문제를 갖고있는 것 같다. – GolezTrol

나는 이것이 상당히 오래된 게시물이라는 것을 알고 있지만 해결책을 찾고있는 자신을 발견했습니다.

조금 있지만 jQuery를 사용하여 끝났습니다. 이것은 실제로 전체 너비에 맞게 .column 이내에 100 % 신장 내 요소를 일으키는 유입 된 높이와 동일한 명시 높이 강제

jQuery(document).ready(function($){ 
    $('.column').each(function(){ 
     var $this = $(this) 
     $this.height($this.height()); 
    }); 
});

(테이블 셀 요소의 .column '내를 말한다). 파이어 폭스, 크롬과 IE의 최신 버전에서

작품 9

수정 : 높이에 영향을 것입니다 테이블 셀 요소 내에서 이미지를로드하는 경우 다음 jQuery를에 위의 코드를 실행하는 것이 좋습니다 (창) .load() 대신. 크롬에 document.ready에 이미지 크기 관련 문제가 있습니다. 위의 코드를 이동하면 .load 문제가 해결되었습니다. 모든 요소 (이미지 포함)

출처

2013-03-27 16:50:17 user2199786

디스플레이 내부 100 % 높이 div : 표 셀 div

답변

관련 문제