Flexbox - 显示页眉和页脚[重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Flexbox - 显示页眉和页脚[重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
刚开始我的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>但是当垂直尺寸很小时......页眉或页脚（或两者）都会消失。
我希望两者都留下来。
谢谢，
标记
答案
如果您希望页眉和页脚始终显示在屏幕上，则应使用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>以上是关于Flexbox - 显示页眉和页脚[重复]的主要内容，如果未能解决你的问题，请参考以下文章