IE瀏覽器全高CSS網格佈局

我開始使用CSS網格佈局偉大的雷切爾安德魯斯，我不知道，我怎麼能拉伸包裝。我正在使用她的第一本示例準備好CSS Grid Layout稍作修改 - 全高。IE瀏覽器全高CSS網格佈局

它適用於Chrome，FF，Safari，Opera - 但它不能填滿IE瀏覽器的全部高度。我正在使用IE前綴的網格系統（-ms-），一切正常，但不是全高。

.wrapper { 
 
    display: grid; 
 
    display: -ms-grid; 
 
    grid-template-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px; 
 
    -ms-grid-columns: 12px calc(50vw - 18px) 12px calc(25vw - 18px) 12px calc(25vw - 12px) 12px; 
 
    grid-template-rows: 12px auto 12px auto 12px; 
 
    -ms-grid-rows: 12px auto 12px auto 12px; 
 
    background-color: #fff; 
 
    color: #444; 
 
    height: 100vh; 
 
} 
 

 
.box { 
 
    background-color: rgb(120, 70, 123); 
 
    border: 5px solid rgb(88, 55, 112); 
 
    color: #fff; 
 
    border-radius: 5px; 
 
    padding: 20px; 
 
    font: 150%/1.3 Lucida Grande, Lucida Sans Unicode, Lucida Sans, Geneva, Verdana, sans-serif; 
 
} 
 

 
.a { 
 
    grid-column: 2/3; 
 
    grid-row: 2/5; 
 
    -ms-grid-column: 2; 
 
    -ms-grid-column-span: 1; 
 
    -ms-grid-row: 2; 
 
    -ms-grid-row-span: 3; 
 
} 
 

 
.b { 
 
    grid-column: 4/7; 
 
    grid-row: 2/3; 
 
    -ms-grid-column: 4; 
 
    -ms-grid-column-span: 3; 
 
    -ms-grid-row: 2; 
 
    -ms-grid-row-span: 1; 
 
} 
 

 
.c { 
 
    grid-column: 4/5; 
 
    grid-row: 4/5; 
 
    -ms-grid-column: 4; 
 
    -ms-grid-column-span: 1; 
 
    -ms-grid-row: 4; 
 
    -ms-grid-row-span: 1; 
 
} 
 

 
.d { 
 
    grid-column: 6/7; 
 
    grid-row: 4/5; 
 
    -ms-grid-column: 6; 
 
    -ms-grid-column-span: 1; 
 
    -ms-grid-row: 4; 
 
    -ms-grid-row-span: 1; 
 
}

<div class="wrapper"> 
 
    <div class="box a">A</div> 
 
    <div class="box b">B</div> 
 
    <div class="box c">C</div> 
 
    <div class="box d">D</div> 
 
</div>

也有正在工作的jsfiddle：https://jsfiddle.net/v7d641jb/

（如果要檢查整個如其這裏http://legie.kirril.com/www/grid/index.html）

來源

2017-07-26 ondrejko

你可以使用1FR代替汽車以完全填充網格https://jsfiddle.net/v7d641jb/ 1/ –

雖然CSS電網規格（the older one which is supported by IE ）確實定義了grid-rows的auto值，它顯然不是在IE中工作。

簡單的解決辦法是用1fr替換auto。

取而代之的是：

-ms-grid-rows: 12px auto 12px auto 12px;

試試這個：

-ms-grid-rows: 12px 1fr 12px 1fr 12px;

revised fiddle

來源

2017-07-26 20:14:45

這個作品和它的完美！謝謝！ – ondrejko

Ofc！順便說一句。你知道iOS上的Safari瀏覽器是否存在或將會出現一些低於10的回退？仍有大約15％的用戶使用它。我不能等待在生產網站上使用它。 – ondrejko

我還沒有聽說過或讀過任何關於這方面的信息。可能不會。 –

IE瀏覽器全高CSS網格佈局

回答

相關問題