Question

HTML：

<div class="full">
  <header><h1>header stuff</h1></header>
  <section>
    <div>
       {lots and lots of content}
    </div>
    <div>b</div>
    <div>c</div>
  </section>
</div>

的CSS：

.full {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

   header {
      flex: 78px 0 0;
      background: #ececec;
      color: black;
      padding-left: 33px;
  }

  section {
    flex: auto 1 1;
    display: flex;
    align-items: stretch;

    > div {
      flex: auto 1 1;
      overflow-y: auto;
    }
  }

}

我的外部容器＆＃39; .full＆＃39;占据了屏幕的整个宽度和高度，并使用display：flex来确保标题+部分的子项拉伸以占据下面的所有空间它们。

现在，我想要的是头部自然占用78px而部分占据{全高度 - 78px} - 但是没有像calc那样做任何事情。我希望能够滚动div节的div子节点，而不会滚动影响其他div或页面整体。

这在Chrome中运行得很好，但是在Firefox中打开了我的小提琴，边缘，即它并没有像预期的那样工作。部分得到{lot and lots of contents}的高度，而不是只占用＆＃39; .full＆＃39;

的剩余空间

我应该怎么做才能实现我期待的类似Chrome的布局？

Answer 1

同时为overflow-y:auto应用section，这将解决IE和Firefox中的问题。

section {
  flex: auto 1 1;
  display: flex;
  align-items: stretch;
  overflow-y: auto;

  > div {
    flex: auto 1 1;
    overflow-y: auto;
  }
}

Fiddle DEMO

显示：弹性和滚动内部div

1 个答案: