Question

我正在尝试创建一个高度为页面高度80％的容器，该容器具有固定高度的页眉和页脚，其内容窗格会拉伸以适应剩余的可用空间。

我尝试使用display：table，其布局如下：

<body>
<div class="ticket">
  <div class="header">header</div>
  <div class="body">
    <div class="wrapper">
      <div class="content">content</div>
    </div>
  </div>
  <div class="footer">footer</div>
</div>
</body>

使用这些样式

  body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .ticket {
    background: #ccc;
    width: 600px;
    margin: 0 auto;
    height: 80%;
    display: table;
  }

  .header {
    background: blue;
    height: 36px;
    display: table-row;
  }

  .body {
    background: orange;
    display: table-row;
  }

  .wrapper {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .content {
    height: 600px;
  }

  .footer {
    background: green;
    height: 72px;
    display: table-row;
  }

在Chrome中，这为我提供了一个可滚动的中间面板，随着容器的高度而增长：

不幸的是，这在IE8或Firefox中不起作用，'。body'div延伸以适应'.content'。

有没有办法做到这一点，跨浏览器和IE8 +？

Answer 1

结帐http://caniuse.com/#search=flexbox和/或http://caniuse.com/#search=vh

这些是获得它的方法，但它们都不适用于IE 8。你必须使用JS

创建跨浏览器固定高度可滚动显示：table-row

1 个答案: