sticky-footer布局1、在网页设计中，存在一个相当古老又常见的问题，他是前端工程师绕不开的坎。可简单描述如下：

前言

在网页设计中，存在一个相当古老又常见的问题，他是前端工程师绕不开的坎。可简单描述如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。

解决方案

1、方案一

将内容区包裹在一个容器里，页脚高度固定

html:

css:

效果展示图：

内容少时：页脚块固定在底部

内容多时：页脚块自动向下，且不覆盖内容

2、方案二

<div class="wrapper">
    <header><h1>头部</h1></header>
    <main>内容</main>
</div>
<footer>底部</footer>
footer{
  height: 7em;
}
.wrapper{
  min-height: calc(100vh - 7em);
}

当内容少时，footer在底部，当内容多时，footer被内容往下顶