html - 在 IE11 中使用页眉、页脚和内容部分进行布局

Question

我目前正在开发一个由页眉、页脚和内容部分组成的单页应用程序。内容部分应始终填充页眉和页脚之间的可用空间，以防视口(viewport)太小，用户应该能够滚动整个页面。这意味着页脚不会那样粘。

将所有三个部分放在一个 flexbox 中并为内容设置 flex: auto 1 1 没有任何效果，因为 IE11 对 flex-elements 有问题，其容器的最小高度为 100%。

您知道任何使这种布局成为可能的技术吗？

更新:

为了说明问题，我提供了一个片段。

更新 2:

因为我想根据当前路线将 View (class .view)元素淡入前一个，所以我必须在内容上使用 position: relative元素。不幸的是，flex-shrink: 0 不再生效。

html, body {
    margin: 0;
    height: 100%;
    min-height: 100vh;
    background: #000000;
    color: #EFEFEF;
    font-family: Segoe UI, Roboto, Helvetica;
  }

  #app {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .header-section {
    flex-shrink: 0;
  }

  .footer-secton {
    flex-shrink: 0;
  }

  .content {
    position: relative;
    flex: auto 1 1;
    background: rgba(64, 124, 214, 0.5);
  }

  .view {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

<div id ="app" class="container">
    <header class="header-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </header>
    <main class="content">
      <div class="view">
         Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
         ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
         dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum 
         dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
         eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
         eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
         sanctus est Lorem ipsum dolor sit amet.
      </div>
    </main>
    <footer class="footer-section">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    </footer>
  </div>

Answer 1

我不会使用 min-height: 100%，而是为该包装元素使用 height: 100% 和 overflow: visible。这避免了最小高度问题，并在必要时根据内容展开(和滚动)。