Как мне получить display: grid div, чтобы он занимал весь экран в IE 11?(100vh не работает) - PullRequest
Новая
       15

Как мне получить display: grid div, чтобы он занимал весь экран в IE 11?(100vh не работает)

0 голосов
/ 12 октября 2018

У меня есть довольно сложный макет, который я пытался создать с помощью сетки CSS:

Как это должно выглядеть

How it's supposed to look with grid layout

IE:

How it looks in IE

Как вы можете видеть, нам нужен этот баннер с изменяемым размером, который размещает содержимое на главной странице , но не делаетсделать прокрутку страницы.Я думаю, что по какой-то причине IE не поддерживает vh, когда вы по какой-то причине делаете display: grid и задаетесь вопросом. 

body {
  display: flex;
}

.wrapper {
    justify-content: stretch;	
  flex-grow: 1;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10fr 1fr;
  grid-template-columns: 1fr 10fr 1fr;
  -ms-grid-rows: 50px auto 100px auto 50px;
  grid-template-rows: 50px auto 100px auto 50px;
  grid-template-areas:
    "nav     nav        nav"
    "bar     bar        bar"
    "title   title      title  "
    "left    middle    right"
    "left    composer  right";

  height: 100vh;
  width: 100vw;
}

.nav {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: nav;
  background: teal;
}
.bar {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: bar;
  background: red;
  height: 0;
  -webkit-animation: dynamic-height 4s;
  animation: dynamic-height 4s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  overflow: hidden;
}
.title {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: title;
  background: lightblue;
}
.left {
  overflow-y : scroll;
  -ms-overfow-y: scroll;
  -ms-grid-row: 4;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;
  grid-area: left;
  background: yellow;
}
.middle {
  -ms-grid-row: 4;
  -ms-grid-column: 2;
  grid-area: middle;
  background: green;
}
.right {
  -ms-grid-row: 4;
  -ms-grid-row-span: 2;
  -ms-grid-column: 3;
  grid-area: right;
  background: brown;
}
.composer {
  -ms-grid-row: 5;
  -ms-grid-column: 2;
  grid-area: composer;
  background: light-green;
  height: 30px;
}

@-webkit-keyframes dynamic-height {
  0% {
    height: 0px;
  }
  20% {
    height: 0px;
  }
  50% {
    height: 200px;
  }
  0 {
    height: 0px;
  }
}

@keyframes dynamic-height {
  0% {
    height: 0px;
  }
  20% {
    height: 0px;
  }
  50% {
    height: 200px;
  }
  0 {
    height: 0px;
  }
}
<body style="margin: 0;">
  <div class="wrapper">
    <div class="nav">
      nav
    </div>
    <div class="bar">
      Resizeable Banner
    </div>
    <h2 class="title"> Title </h2>
    <div class="left">
      <p>Sidebar</p>
      <p>Sidebar</p>
      <p>Sidebar</p>
      <p>Sidebar</p>
      <p>Sidebar</p>
      <p>Sidebar</p>
      
      <p>Sidebar</p>
      
      <p>Sidebar</p>
      
      <p>Sidebar</p>
      <p>Sidebar</p>
      
      <p>Sidebar</p>
      
      <p>Sidebar</p>
      
      <p>Sidebar</p>
      <p>Sidebar</p>
      <p>Sidebar</p>
      <p>Sidebar</p>
      <p>Sidebar</p>
    </div>
    <div class="middle">
      <p>Messages</p>
    </div>
    <div class="composer">
      COMPOSER
    </div>
    <div class="right">
      <p>Right Sidebar</p>
    </div>
  </div>
</body>

Я использовал https://autoprefixer.github.io/ для генерации префиксов CSS-Grid, однако одна последняя вещь , которая не работает вIE 11 является прокручиваемой боковой панелью.

https://codepen.io/justgage/pen/EdXGEX

1 Ответ

0 голосов
/ 12 октября 2018

Попробуйте изменить переполнение-у: авто на переполнение-у: прокрутка;

overflow-y : scroll;

ИЛИ

-ms-overflow-y: scroll;

Будет добавлена ​​полоса прокрутки для IE.

Кроме того, вы можете попробовать изменить CSS согласно вашему требованию.

...