外观如何

Question

我尝试使用CSS网格创建这种相当复杂的布局：

外观如何

IE：

如您所见，我们需要一个可调整大小的横幅，将内容压缩到主页上，但不会使页面滚动。我认为出于某些原因，当您出于某些原因而想vh时，IE不支持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中不起作用的最后一件事是可滚动的侧边栏。 < / p>

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

Answer 1

尝试将 overflow-y：自动更改为 overflow-y：滚动；

overflow-y : scroll;

OR

-ms-overflow-y: scroll;

它将添加IE的滚动条。

此外，您可以根据需要尝试修改CSS。

如何获得显示：grid div占据IE 11的整个屏幕？（100vh似乎不起作用）

外观如何

IE：

1 个答案:

如何获得显示：grid div占据IE 11的整个屏幕？ （100vh似乎不起作用）

外观如何

IE：

1 个答案:

如何获得显示：grid div占据IE 11的整个屏幕？（100vh似乎不起作用）