主体上带有 flexbox 的粘性页脚和 children

Question

我想使用带有页眉、部分（由边栏和部分组成）和粘性页脚的简单 flexbox 布局。

我的问题是，当我将 display:flex 应用到正文并且至少应用到一个 child（无论是页眉、部分还是页脚都无关紧要）时，只有 firefox 喜欢我需要。

html, body {
 height:100vh;
 min-height: 100vh;
}

body {
 display: flex;
 flex-direction: column;
}

section {
 flex: 1;
 display: flex;
}
section section {
 display: block;
}

<body>

 <header>
  <h1>Test Flexbox</h1>
 </header>
  
 <section>
   <aside>
   <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
 </aside>
    
   <section>
  <article>
          <h2>Test</h2>
          <p>Welome to this flex box test snippet.</p>
        </article>
      </section>
    
  </section>

 <footer>
  <p>Here goes the footer, that should always stick to the bottom</p>
 </footer>

</body>

以上代码在 Firefox 中有效，但在 Chrome、Opera、Safari（可能还有更多）中无效。

如果我将 display:flex 应用到正文之后的 <div>，它在任何地方都有效。

这是一个错误还是 allowed/recommended 在 body-element 上使用 flexbox？

编辑： 这是使用 div 的 alternative-version，它适用于所有浏览器：

html, body {
 height:100vh;
 min-height: 100vh;
}

div {
 display: flex;
 flex-direction: column;
}

section {
 flex: 1;
 display: flex;
}
section section {
 display: block;
}

<body><div>

 <header>
  <h1>Test Flexbox</h1>
 </header>
  
 <section>
   <aside>
   <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
      <p>Test Test Test</p>
 </aside>
    
   <section>
  <article>
          <h2>Test</h2>
          <p>Welome to this flex box test snippet.</p>
        </article>
      </section>
    
  </section>

 <footer>
  <p>Here goes the footer, that should always stick to the bottom</p>
 </footer>

</div></body>

Answer 1

当使用视口单位时，不需要在所有项目上设置它，在这种情况下 body 就足够了。另外，删除 height: 100vh 它将正常工作。

注1； div 版本有点工作，但也不完全，因为你没有像 body 那样给它 height/min-height。

注2；我在某处读到，当同时使用具有相同值的 height/min-height 时，它可能会在某些浏览器中出现 wrong/be 错误，这里可能就是这种情况。当我找到它的位置时，我会更新我的答案。

堆栈片段

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  flex: 1;
  display: flex;
}

section section {
  display: block;
}

<header>
  <h1>Test Flexbox</h1>
</header>

<section>
  <aside>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
  </aside>

  <section>
    <article>
      <h2>Test</h2>
      <p>Welome to this flex box test snippet.</p>
    </article>
  </section>

</section>

<footer>
  <p>Here goes the footer, that should always stick to the bottom</p>
</footer>

已更新；要支持有 min-height 错误的 IE11，请执行以下操作：

html {
  display: flex;                   /*  IE bug fix  */
}

body {
  width: 100%;                     /*  flex row item need this to
                                       take full width  */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

section {
  flex-grow: 1;                    /*  IE need this  */
  display: flex;
}

section section {
  display: block;
}

<header>
  <h1>Test Flexbox</h1>
</header>

<section>
  <aside>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
    <p>Test Test Test</p>
  </aside>

  <section>
    <article>
      <h2>Test</h2>
      <p>Welome to this flex box test snippet.</p>
    </article>
  </section>

</section>

<footer>
  <p>Here goes the footer, that should always stick to the bottom</p>
</footer>

主体上带有 flexbox 的粘性页脚和 children

Sticky footer with flexbox on body and children

css

firefox

sticky-footer

flexbox