使用CSS display：table時為什么IE10及更低版本中的高度100％失敗？

Question

我讀了很多文章，似乎都無法解釋或幫助解決此問題。 所以我希望一些CSS向導可以幫助您？

所以我正在使用CSS表布局來實現樣式div的簡單垂直對齊。 外部div具有計算得出的大小，內部嵌套的div從其各自的父級繼承大小。 除非您在IE10或更低版本中查看，否則一切都很好。 行和單元格都決定其高度為0px的位置。 我相信這是由於未在行級別指定高度，因此在IE中，單元格無法繼承父級高度。 因此，如果將行高增加100％，則該行在IE 10以外的所有瀏覽器中都可以正常工作，而IE 10則由行確定行高的兩倍。 我唯一能想到的就是IE不滿意，是我將100％的div放入容器中，並讓它們計算出自己相等的大小。

 .container { background-color: grey; height: calc(100px + 10px); width: 200px; position: fixed; } .table { height: 100%; width: 200px; background-color: black; display: table; } .row { width: 100%; display: table-row; background-color: orange; } .block-1 { height: 100%; width: 100%; background-color: red; display: block; } .tablecell { /* height: 100%; */ display: table-cell; } .block-2 { height: 100%; width: 100%; background-color: blue; display: block; } 

 <div class="container"> <div class="table"> <div class="row"> <div class="tablecell"> <div class="block-1"></div> </div> </div> <div class="row"> <div class="tablecell"> <div class="block-2"></div> </div> </div> </div> </div> <div> 

如果在IE 10或更低版本中瀏覽，這是一個小提示，因為紅色和藍色潛水高度現在為零，因此無法看到。

Answer 1

為什么不使用javascript（舊網頁在javascript hack上占了很大比重，以彌補舊版瀏覽器中對css的支持不足）這一點很小

adjustHeight();
window.addEventListener('resize', adjustHeight);

function adjustHeight(){
    document.getElementsByClassName('container')[0].style.height = window.innerHeight + 'px';
    // or if you have jQuery it would be even more retro compatible without too much hassle
    // $('.container').css('height', window.innerHeight);
};

您也可以使用javascript進行垂直分隔。

$('container-half').css('height', window.innerHeight/2 ); 是一個例子

現在以您的示例進行編輯

 adjustHeight(); window.addEventListener('resize', adjustHeight); function adjustHeight(){ document.getElementsByClassName('container')[0].style.height = window.innerHeight + 'px'; }; 

 .container { background-color: grey; height: calc(100px + 10px); width: 200px; position: fixed; } .table { height: 100%; width: 200px; background-color: black; display: table; } .row { width: 100%; display: table-row; background-color: orange; } .block-1 { height: 100%; width: 100%; background-color: red; display: block; } .tablecell { /* height: 100%; */ display: table-cell; } .block-2 { height: 100%; width: 100%; background-color: blue; display: block; } 

 <div class="container"> <div class="table"> <div class="row"> <div class="tablecell"> <div class="block-1"></div> </div> </div> <div class="row"> <div class="tablecell"> <div class="block-2"></div> </div> </div> </div> </div>