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网格布局

回答

相关问题