使用常见的sticky footer布局方式

什么是sticky footer布局

我们常见的网站页面都会把一个页面分为：头部区、内容区、页脚区,当头部区和内容区内容较少时,页脚区能固定在网页底部,而不是随着文档流排布。当页面内容较多时，页脚能随着文档内容自动撑开,显示在页面的最底部。这就是sticky footer布局。

实现方式

flex 实现

html代码

<header class="header"></header>
<main class="content">
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
<p>近段时间房管局四大金刚</p>
</main>
<footer class="footer"></footer>

css代码

*{
margin: 0;
padding: 0;
}
html,body{
display: flex;
flex-direction: column;
min-height: 100%;
width: 100%;
}
.header{
background: gray;
height: 20px;
}