グリッドレイアウトをしようした基本的なレイアウトなのですが、IE(11)のみ表示崩れてしまいます。
IE対応の記述もしているのですが間違いがありますでしょうか。
何卒よろしくお願いいたします。
理想:ヘッダー・フッターが固定でメインが画面の余白を埋める高さまで広がる
IEでの崩れ、ヘッダー・フッターが上部に集結され、mainが高さを持っていない状態
HTML
1<body> 2 <header></header> 3 <main></main> 4 <footer></footer> 5</body>
CSS
1body { 2 min-height: 100vh; 3 margin: 0; 4 padding: 0; 5 -webkit-font-smoothing: antialiased; 6 font-smoothing: antialiased; 7 display: -ms-grid; 8 display: grid; 9 -ms-grid-rows: 50px 1fr 30px; 10 grid-template-rows: 50px 1fr 30px; 11 -ms-grid-columns: 1fr; 12 grid-template-columns:1fr; 13} 14header { 15 background: #ccc; 16 -ms-grid-row: 1 / 2; 17 -ms-grid-row-span: 1; 18 grid-row-start: 1; 19 grid-row-end: 2; 20 -ms-grid-column: 1 / 2; 21 -ms-grid-column-span: 1; 22 grid-column-start: 1; 23 grid-column-end: 2; 24} 25main { 26 background: #aaa; 27 -ms-grid-row: 2 / 3; 28 -ms-grid-row-span: 1; 29 grid-row-start: 2; 30 grid-row-end: 3; 31 -ms-grid-column: 1 / 2; 32 -ms-grid-column-span: 1; 33 grid-column-start: 1; 34 grid-column-end: 2; 35} 36footer { 37 background: #999; 38 -ms-grid-row: 3 / 4; 39 -ms-grid-row-span: 1; 40 grid-row: 3 / 4; 41 grid-row-start: 3; 42 grid-row-end: 4; 43 -ms-grid-column: 1 / 2; 44 -ms-grid-column-span: 1; 45 grid-column-start: 1; 46 grid-column-end: 2; 47}
回答1件
あなたの回答
tips
プレビュー