Flexbox“圣杯”布局,页脚旁边的页脚而不是

时间:2016-02-25 09:12:58

标签: html css layout flexbox

我使用了“圣杯”布局没有任何问题,并设法得到一个固定标题的粘性页脚。样式取自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

1 个答案:

答案 0 :(得分:0)

height:100%必须从html继承,否则它是100%没有(身体没有高度设置)。

HolyGrail-content-wrapper也需要成为弹性箱。

以完整页面模式运行以下代码段

&#13;
&#13;
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;
}
&#13;
<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>
&#13;
&#13;
&#13;