带有 flexbox 的粘性页脚在 body 和 children 上答案

【问题标题】：Sticky footer with flexbox on body and children带有 flexbox 的粘性页脚在 body 和 children 上
【发布时间】：2018-06-30 19:43:37
【问题描述】：

我想使用一个简单的 flexbox 布局，其中包含页眉、部分（由旁边和部分组成）和粘性页脚。

我的问题是，当我将display:flex 应用于正文和至少一个孩子（无论是页眉、节还是页脚）时，只有 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>，它可以在任何地方工作。

这是一个错误还是不允许/不建议在 body-element 上使用 flexbox？

编辑： 这是使用适用于所有浏览器的 div 的替代版本：

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>

【问题讨论】：

您能否提供使用div 时有效的示例？顺便说一句，Flexbox 可以在body 上使用。
@LGSon 添加了“div”版本。

标签： css firefox flexbox sticky-footer

【解决方案1】：

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

注 1； div 版本有效，但也不是完全有效，因为您没有像 body 那样给它height/min-height。

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

堆栈sn-p

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>

【讨论】：

谢谢，我刚刚意识到 div 版本根本不起作用 :)