持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
前言
这个问题考察的是大家对 CSS 基础知识的掌握程度。粘连布局是众多 CSS 中布局方式中的一种，比如常见的还有单列布局、三栏布局等等，今天我们主要将的是粘连布局。因为在我们平常的页面布局中，粘连布局使用的地方还是挺多的，有些小伙伴明明都在项目中用过这种布局方式了，但是却不知它叫粘连布局，如果面试的时候没有回答上来就很亏。
所以今天我们就讲一讲 CSS 众多布局中的一种：粘连布局。
1.什么是粘连布局？
粘连布局可能有些小伙伴没有听过，但是我相信很多小伙伴即使没有听过粘连布局，但是在项目中可能已经用到过了。
我们可以给粘连布局一个简单的定义：
所谓粘连布局（也可以叫做
sticky footer布局），就是当内容区域元素没有超出容器时，网页底部footer紧贴在网页底部，当内容区域超长时，底部footer就会紧跟在内容区域底部，而不是紧贴在网页底部。
上面的定义中有好几个关键词：内容区域、footer、超长等等。可能小伙伴们只看定义还不一定能理解粘连布局是什么，接下来我们看一张图就能够很好理解了。
粘连布局示意图：
看了上面那张图大家应该就能理解什么叫做粘连布局，其实说白了粘连布局就是解决网页 footer 的问题。
上面图中所示的问题在我们项目开发中很容易遇到，比如我们下面的网页：
上图中我们发现 footer 跟在内容区域后面，这个时候网页留下了一大片空白，这一般不是我们想要的，我们希望 footer 此时紧贴在网页的底部。
想要实现这种效果，就用到了我们的粘连布局。
2.实现粘连布局的方式
既然我们知道了粘连布局主要解决了什么问题，那么我们接下来就该想一想如何实现粘连布局。实现粘连布局的方式不只一种，我们一起来学习一下。
我们先来理一理思路，粘连布局主要就是解决两个问题：
- 第一个问题：内容区域不够时，
footer紧贴底部 - 第二个问题：内容区域超长时，
footer紧贴内容区
2.1 负 margin-top
我们可以想一想第一个问题出现的原因是什么？无非就是内容区域的高度不够，那么我们把内容区域的高度变大一点岂不是就解决了这个问题了，至于第二个问题，内容超长后，在我们不做任何处理的情况下，footer 本来就是更在内容区域后面的。
实现原理：
- 给内容区添加额外的包裹元素
- 设置包裹元素的
padding-bottom - 设置
footer元素的margin-top
代码如下：
<head>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.content-wrap {
min-height: 100%;
}
.content {
height: 50vh;
width: 100%;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 60px;
}
.footer {
height: 60px;
width: 100%;
background-color: rgb(47, 46, 46);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-top: -60px;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div class="content-wrap">
<div class="content">
<h1>我是内容区域</h1>
</div>
</div>
<!-- footer -->
<div class="footer">
<h1>我是 footer</h1>
</div>
</body>
实现效果：
上段代码主要分为了两部分：内容区域、footer 区域。我们给内容区域外层设置了包裹元素，并且将该包裹元素的最小高度设置为了 100%，这样就相当于内容区域就填充满了整个屏幕，footer 区域自然就跟随在内容区域后面。然后我们将 footer 的上外边距设置为了负的 footer 高度，这样就可以让 footer 感很好出现在屏幕的底部，然后我们给 content 设置了一个 padding，避免 footer 遮挡内容。
我们试试当内容区域超长是什么效果，效果如下：
2.2 负 margin-bottom
上面我们利用了 margin-top 来实现了粘连布局，那么同理，我们也可以利用 margin-bottom 来实现粘连布局。
实现原理：
- 将所有内容元素添加一个包裹元素
- 将包裹元素高度设置为
100% - 通过设置包裹元素的
margin-bottom让footer显现出来
代码如下：
<head>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
.content-wrap {
min-height: 100%;
margin-bottom: -60px;
}
.content {
height: 50vh;
width: 100%;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.footer {
height: 60px;
width: 100%;
background-color: rgb(47, 46, 46);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div class="content-wrap">
<div class="content">
<h1>我是内容区域</h1>
</div>
</div>
<!-- footer -->
<div class="footer">
<h1>我是 footer</h1>
</div>
</body>
实现效果：
上段代码和我们前面使用负 margin-top 的方式非常的类似，其实实现原理都是一样的，总之就是为了让 footer 出现在页面底部。
2.3 flex 布局
flex 布局基本上可以解决网页布局中90%以上的问题，这其中当然包括粘连布局了。我们前面两种方法虽然可以实现粘连布局，但是还是有一个弊端的：我们需要固定底部高度。而使用了 flex 布局，这些就都不是问题了，而且实现起来也很简单。
代码如下：
<head>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
height: 50vh;
width: 100%;
background-color: #ccc;
display: flex;
align-items: center;
justify-content: center;
}
.footer {
width: 100%;
background-color: rgb(47, 46, 46);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div class="content">
<h1>我是内容区域</h1>
</div>
<!-- footer -->
<div class="footer">
<h1>我是 footer</h1>
</div>
</body>
实现效果：
上段代码中我们没有给 footer 设置高度，也没有设置任何的 margin，我们只是利用了 flex:1 这个属性就让内容区域填充满了页面。不熟悉 flex 布局的小伙伴还需要自己下去好好学学。
总结
网页的布局有很多种，我们每天都会浏览各种各样的网页，你不妨静下心来，仔细分析一下该网页的布局采用的时哪种方式，我们今天讲的粘连布局只是冰山一下，更为丰富的布局方式还需要小伙伴们自行下来开采。
如果觉得文章太繁琐或者没看懂，可以观看视频： 小猪课堂
