0
達成したいのは、このように動作する2列のグリッドレイアウトを持つことです。 ：IE11：最初の列が表示されるかどうかによって、2列目のグリッドレイアウトが2列または1列になる方法
inlineからcol 1セットのdisplayプロパティ場合 - 次のようにレイアウトがレンダリングされるべきである：
+------+--------------+
| | |
| | |
| c | c |
| o | o |
| l | l |
| | |
| 1 | 2 |
| | |
| | |
+------+--------------+
場合col 1のdisplayプロパティがnoneに設定されている場合 - col 2が両方の列を占有する必要があります。
+---------------------+
| |
| |
| c |
| o |
| l |
| |
| 2 |
| |
| |
+---------------------+
、私は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;
}
けれども、私はIE11で動作するように同じことを必要とし、それを取得ここではやさしい。私はthisと読んでthis one、IE10とIE11のグリッド実装に関する記事を見てきました。
col 1は最終的にメニューになるので、displayプロパティ（ChromeとFirefoxでは期待通りに機能し、IE11では機能しない）を切り替えて表示/非表示にするボタン付きのデモを準備しました。
function toggleDisplay() {
\t var menu_div = document.getElementById('menu');
if (menu_div.style.display === '' || menu_div.style.display === 'none') {
\t menu_div.style.display = 'inline'
} else {
\t menu_div.style.display = 'none' \t
}
}#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>I 'はメニュー' をトグルする異なる方法をも試みた - 外に移動を介してビュー、同じ結果と（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>I試してみました-ms-grid-columnにautoのfirst (JSFiddle)とsecond (JSFiddle)（これは私が必要な結果に得ることができたと思います）上記の例では、desi赤い結果はまだ達成されていません。
私の質問は以下のとおりです。
- IE11で目的のグリッドレイアウトを達成するためのレシピは、プレーンCSSで、どのようなものです（すなわち、プリプロセッサなどを使用せずに）？
- グリッドはIE11のサポートが必要なことを示す良いアプローチですか、そうであれば何か他の方法が勧められますか？
可能な複製：https://stackoverflow.com/q/23794713/3597276 –