Flexbox 粘性页脚 - 'Flex: 1' 无法填充高度答案

【问题标题】：Flexbox Sticky Footer - 'Flex: 1' Not Working to Fill HeightFlexbox 粘性页脚 - 'Flex: 1' 无法填充高度
【发布时间】：2017-06-29 02:15:11
【问题描述】：

我目前正在尝试测试 flexbox 粘性页脚方法的动态高度页脚，我有一段时间遇到问题，但我遇到了主要部分无法扩展以填充的问题在将 'min-height: 100vh' 和 'flex-direction: column' 应用到包含主体之后，使用 'flex: 1' 的窗口的完整高度。

这使页脚仍然位于页面的一半，阅读后我无法弄清楚为什么这不应该工作。

HTML：

    <body>

    <div id="wrapper">

        <main>

            <div id="pageContent">

                <h1>Page Content</h1>

                <h2>Page Content</h2>

                <h3>Page Content</h3>

                <h4>Page Content</h4>

            </div>

        </main>

        <footer>

            <row>

                <p>Footer Content</p>

                <p>Footer Content</p>

                <p>Footer Content</p>

                <p>Footer Content</p>

            </row>

        </footer>

    </div>

</body>

CSS：

html, body
{
margin: 0;
padding: 0;
max-width: 100%;
background: #1a1a1a;
}

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

main
{
width: 100%;
margin: 0;
padding: 50px 10%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
flex: 1;
}

main > #pageContent
{
height: 100%;
width: 100%;
margin: 0;
}

footer
{
height: auto;
background: #0d0d0d;
padding: 0 10%;
margin: 0;
}

footer > row
{
display: flex;
}

footer > row > p
{
flex-grow: 1;
flex-basis: 0;
text-align: center;
padding: 25px 0;
margin: 0;
}

【问题讨论】：

标签： html css flexbox sticky-footer

【解决方案1】：

删除“包装”..

<main>
    <div id="pageContent">

        <h1>Page Content</h1>

        <h2>Page Content</h2>

        <h3>Page Content</h3>

        <h4>Page Content</h4>

    </div>
</main>
<footer>
    <row>

        <p>Footer Content</p>

        <p>Footer Content</p>

        <p>Footer Content</p>

        <p>Footer Content</p>
    </row>
</footer>

http://www.codeply.com/go/X8vFjgYQie

【讨论】：

【解决方案2】：

您尚未将display:flex 应用于#wrapper div。

Flexbox 没有被继承。

html,
body {
  margin: 0;
  padding: 0;
  max-width: 100%;
}
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
#wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}
main {
  width: 100%;
  margin: 0;
  padding: 50px 10%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  flex: 1;
}
main > #pageContent {
  height: 100%;
  width: 100%;
  margin: 0;
}
footer {
  height: auto;
  background: lightgreen;
  padding: 0 10%;
  margin-top: auto;
}
footer > row {
  display: flex;
}
footer > row > p {
  flex-grow: 1;
  flex-basis: 0;
  text-align: center;
  padding: 25px 0;
  margin: 0;
}

<div id="wrapper">

  <main>

    <div id="pageContent">

      <h1>Page Content</h1>

      <h2>Page Content</h2>

      <h3>Page Content</h3>

      <h4>Page Content</h4>

    </div>

  </main>

  <footer>

    <row>

      <p>Footer Content</p>

      <p>Footer Content</p>

      <p>Footer Content</p>

      <p>Footer Content</p>

    </row>

  </footer>

</div>

Codepen Demo

【讨论】：