Flexbox-同时显示页眉和页脚

Question

开始我的Flexbox之旅。

我有一个非常简单的布局，希望为手机设置样式。它们的布局具有以下结构：

<div class=wrap>
     <header></header>
     <article>lots of text here</article>
     <footer></footer>
</div>

我想分别在页面的顶部和底部显示页眉和页脚。该文章将包含太多文本以致无法在屏幕上显示，因此用户将不得不向上或向下滚动。

页眉和页脚都可以设置为40px。

如何使用flexbox设置样式？

以下是开始：

.wrap {
  border:1px solid rgba(250,0,0,1);
  display: flex;
  flex-direction: column;

}


header {
  background: lightgreen;
  height: 40px;
}

article {
  background: grey;
}



footer {
  background: gold;
  height: 40px;
}

<div class="wrap">

  <header>header</header>

  <article>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

  </article>

  <footer>footer</footer>

</div>

但是，当垂直尺寸较小时，页眉或页脚（或两者）都会消失。

我要两个都留下来。

谢谢

标记

Answer 1

如果您希望页眉和页脚始终显示在屏幕上，则应使用position: absolute或position: fixed。

如果您的.wrap是页面上的全角，全高，则代码将如下所示（请注意，flexbox并非用于您的任务的工具）。

.wrap {
  border:1px solid rgba(250,0,0,1);
  width: 100%;
  height: 100%;
  position: relative;
  padding: 40px 0;
  box-sizing: border-box;
}


header {
  background: lightgreen;
  height: 40px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

article {
  height: 100%;
  background: grey;
}

article p:first-child {
  margin-top: 0;
}

footer {
  background: gold;
  height: 40px;
  
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="wrap">

  <header>header</header>

  <article>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

  </article>

  <footer>footer</footer>

</div>

与position: fixed相同的解决方案

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.wrap {
  width: 100%;
  height: 100%;
  border:1px solid rgba(250,0,0,1);
}


header {
  background: lightgreen;
  height: 40px;
  position: fixed;
  top: 1px;
  width: 100%;
}

article {
  padding: 40px 0;
  background: grey;
}



footer {
  background: gold;
  height: 40px;
  position: fixed;
  bottom: 1px;
  width: 100%;
}

<div class="wrap">

  <header>header</header>

  <article>
    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. nulla, illum ea consectetur!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. cumque ea, mollitia sequi quo consequatur dolor itaque numquam, aut tempore suscipit, ut quaerat. qui!</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aliquam id rem numquam, illum atque ducimus maiores assumenda dolorum ut.</p>

    <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. accusantium cum unde animi, obcaecati, minima odio.</p>

  </article>

  <footer>footer</footer>

</div>