IE11：如何制作双列网格布局，第二列将填充两列或一列，具体取决于是否显示第一列

Question

我想要实现的是具有如下行为的两列网格布局：

如果 col 1 的 display 属性设置为 inline - 布局应呈现如下：

+------+--------------+
|      |              |
|      |              |
|  c   |      c       |
|  o   |      o       |
|  l   |      l       |
|      |              |
|  1   |      2       |
|      |              |
|      |              |
+------+--------------+

如果 col 1 的 display 属性设置为 none - col 2 应该占据两列：

+---------------------+
|                     |
|                     |
|          c          |
|          o          |
|          l          |
|                     |
|          2          |
|                     |
|                     |
+---------------------+

在 Chrome 和 Firefox 中，我能够通过以下 CSS:

实现它

#content {
  display: grid;
  grid-template-columns: 15% minmax(85%, 1fr);
}

.col-1 {
  background: #D2691E;
  /* display: none; */
  grid-row-start: 1;
  grid-row-end: 1;
}

.col-2 {
  background: #191970;
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: auto;
  grid-column-end: span 2;
}

Demonstration on JSFiddle

虽然，我需要同样的东西才能在 IE11 中工作，但这里变得更加棘手。我已阅读 this and looked through this one，有关 IE10 和 IE11 中网格实现的文章。

col 1 最终将成为一个菜单，所以我准备了一个带有按钮的演示，旨在通过切换 display 属性（有效正如在 Chrome 和 Firefox 中预期的那样，在 IE11 中不起作用):

function toggleDisplay() {
 var menu_div = document.getElementById('menu');
  if (menu_div.style.display === '' || menu_div.style.display === 'none') {
   menu_div.style.display = 'inline'
  } else {
   menu_div.style.display = 'none' 
  }
}

#content {
  display: -ms-grid;
  display: grid;
  
  -ms-grid-columns: 15% minmax(85%, 1fr);
  grid-template-columns:  15% minmax(85%, 1fr);
  
  -ms-grid-rows: 1fr;
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}


.menu {
  background: #D2691E;
  display: none;
  
  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;

}

.content-area {
  background: #191970;
  
  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;
  
  -ms-grid-column: 2;
  grid-column-start: auto;
  
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
}

<body>
<div id='content'>
<div class='menu' id='menu'></div>
<div class='content-area'>
<button onclick=toggleDisplay() >Show/hide 'display:none'</button>
</div>
</div>
</body>

Code above on JSFiddle

我也尝试了不同的切换方法 'menu' - 通过将其移出视图，结果相同（在 Chrome 中有效，Firefox 不在 IE11 中，尽管它在中切换菜单IE，至少）：

function toggleLeft() {
  var menu_navigation = document.getElementById('menu');
  if (menu_navigation.style.position === 'fixed' || menu_navigation.style.position === '') { 
    open();
    stopAnimation();
  } else {
    close();
  }
}

function close() {
  var menu_navigation = document.getElementById('menu');
  if (menu_navigation.style.position !== 'fixed') {
    menu_navigation.style.position = 'fixed';
    menu_navigation.style.left = '-15%';
    menu_navigation.style.witdh= '100%';
    menu_navigation.style.height = '100%';
  }  
}

function open() {
  var menu_navigation = document.getElementById('menu');
  if (menu_navigation.style.position !== 'relative') {
    menu_navigation.style.position = 'relative';
    menu_navigation.style.left = '0';
    menu_navigation.style.widh = 'auto';
    menu_navigation.style.height = 'auto';
  }
}

#content {
  display: -ms-grid;
  display: grid;
  
  -ms-grid-columns: 15% minmax(85%, 1fr);
  grid-template-columns:  15% minmax(85%, 1fr);
  
  -ms-grid-rows: 1fr;
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}


.menu {
  background: #D2691E;
  position: fixed;
  left: -15%;
  height: 100%;

  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;

}

.content-area {
  background: #191970;
    
  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;
  
  -ms-grid-column: 2;
  grid-column-start: auto;
  
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
  
}

<body>
<div id='content'>
<div class='menu' id='menu'></div>
<div class='content-area'>
<button onclick=toggleLeft() >Show/hide 'left: -15%'</button>
</div>
</div>

</body>

Code above on JSFiddle

我已经尝试将 -ms-grid-column 设置为 auto 以获得 first (JSFiddle) and second (JSFiddle)（我想这已经是我能达到的最接近要求的结果了）上面的示例，尽管仍然需要结果没有达到。

我的问题是：

在 IE11 中使用普通 CSS（即不使用预处理器等）实现所需网格布局的秘诀是什么？
鉴于我需要 IE11 支持，网格是否是一种很好的使用方法，或者建议采用其他方法（如果是，可能是什么）？

Answer 1

您可以使用 attribute 选择器为 .content-area 元素指定样式：

.content-area{
    grid-column-start: 1;
}
#menu[style="display: block"] + .content-area{
    grid-column-start: auto;
}

或者，由于您已经使用 JS 应用内联样式，您可以在 open 和 close 函数中的内容区域元素上添加和删除内联网格样式。

如果这是关于在 IE11 上使用替代网格的一般性问题 - 您可以查看 modernizr JS library，如果浏览器不支持 [=22]，则使用替代 table 布局样式=]-网格.

IE11：如何制作双列网格布局，第二列将填充两列或一列，具体取决于是否显示第一列

IE11: how to make two-column grid layout that the second column would fill both or one column, depending on whether the first column is displayed

html

css

grid-layout

internet-explorer-10

internet-explorer-11