Flexbox“圣杯”布局，页脚位于侧边栏旁边而不是下方答案

【问题标题】：Flexbox "Holy grail" layout with footer next to sidebar instead of belowFlexbox“圣杯”布局，页脚位于侧边栏旁边而不是下方
【发布时间】：2016-06-07 23:08:37
【问题描述】：

我使用“圣杯”布局没有任何问题，并设法获得一个带有固定页眉的粘性页脚。样式取自https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/。

.HolyGrail {
  display: flex;
  height: 100%; /* 1, 3 */
  flex-direction: column;
}

.HolyGrail-header,
.HolyGrail-footer {
  flex: none; /* 2 */
  color: #FFFFFF;
  height: 48px;
  background-color: #222222;
}

.HolyGrail-body {
  display: flex;
  flex: 1 0 auto; /* 2 */
  flex-direction: row;
  padding: var(--space);
}

.HolyGrail-content {
  flex: 1;
  margin-top: var(--space);
  background-color: #AAAAAA;
}

.HolyGrail-nav {
  order: -1;
}

.HolyGrail-nav,
.HolyGrail-ads {
  flex: 0 0 10%;
  padding: 1em;
  background: rgba(147, 128, 108, 0.1);
}

但是，我需要将页脚移到内容下方但在侧边栏旁边。在主块内移动页脚可能不是要走的路，因为我想我需要一个围绕内容和页脚的包装器。但是，我不确定我应该在包装器中做什么。这是我现在拥有的，但不起作用。

.HolyGrail-content-wrapper {
  flex: 1;
}

html 是：

<body>
  <div class="HolyGrail">
    <header class="HolyGrail-header">
      Header.
    </header>

    <div class="HolyGrail-body">
      <div class="HolyGrail-content-wrapper">
        <main class="HolyGrail-content">
          <p>Line of text.</p>
          <p>Line of text.</p>
          <p>Line of text.</p>
          <p>Line of text.</p>
          <p>Line of text.</p>
          <p>Line of text.</p>
        </main>
        <footer class="HolyGrail-footer">
          Footer.
        </footer>
      </div>
      <nav class="HolyGrail-nav">
        Sidebar.
      </nav>
    </div>
  </div>
</body>

看到这个 plunkr：http://plnkr.co/edit/QWttptvPRplvHLk8MFRt?p=preview

【问题讨论】：

plunkr 中的页脚似乎正在执行您的问题要求：页脚位于内容下方和侧边栏旁边。请提供更多详细信息。
问题是当没有足够的主要内容填满整个屏幕时，侧边栏和页脚没有刷新到屏幕底部。因此，侧边栏应该占据屏幕的完整高度（减去标题）。页脚应该粘在屏幕底部的侧边栏旁边或内容下方，只有内容和页脚应该滚动。

标签： html css layout flexbox

【解决方案1】：

height:100% 必须继承自 html，否则它是 100% 的空（body 没有设置高度）。

你 HolyGrail-content-wrapper 也需要是一个 flexbox。

在下面以全页模式运行 sn-p

html, body,.HolyGrail {
  height: 100%;
  margin:0;
}
.HolyGrail {
  display: flex;
  /* 1, 3 */
  flex-direction: column;
}
.HolyGrail-header,
.HolyGrail-footer {
  flex: none;
  /* 2 */
  color: #FFFFFF;
  height: 48px;
  background-color: #222222;
}
.HolyGrail-body {
  display: flex;
  flex: 1 0 auto;
  /* 2 */
  flex-direction: row;
  padding: var(--space);
}
.HolyGrail-content {
  flex: 1;
  margin-top: var(--space);
  background-color: #AAAAAA;
}
.HolyGrail-nav {
  order: -1;
}
.HolyGrail-nav,
.HolyGrail-ads {
  flex: 0 0 10%;
  padding: 1em;
  background: rgba(147, 128, 108, 0.1);
}
.HolyGrail-content-wrapper {
  flex:1;
 display:flex;
  flex-flow:column;
}

<div class="HolyGrail">
  <header class="HolyGrail-header">
    Header.
  </header>

  <div class="HolyGrail-body">
    <div class="HolyGrail-content-wrapper">
      <main class="HolyGrail-content">
        <p>Line of text.</p>
        <p>Line of text.</p>
        <p>Line of text.</p>
        <p>Line of text.</p>
        <p>Line of text.</p>
        <p>Line of text.</p>
      </main>
      <footer class="HolyGrail-footer">
        Footer.
      </footer>
    </div>
    <nav class="HolyGrail-nav">
      Sidebar.
    </nav>
  </div>
</div>

【讨论】：

我已经更新了 Plunkr，这就像一个魅力。