html - Flexbox - 同时显示页眉和页脚

Question

刚刚开始我的 flexbox 之旅。

我有一个非常简单的布局，我希望为移动设备设计样式。它们的布局具有以下结构：

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

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

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

如何使用 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>

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

我希望两个都留下。

谢谢，

标记

标签： htmlcssflexbox

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>