问题描述是粘性页脚布局
例如，网页上有一篇文章，文章可长可短，如果文章比较长，就在文章末尾放置一个点赞按钮即可。 如果文章很短css3 底部固定，请在页面顶部放置一个“赞”按钮。 一般疗效图如下：
布局是否粘在顶部
当文章很短时：
当文章较长时：
实现方法表1（定位布局）
观察网页的骨架，大致分为两部分，一部分是文章内容，另一部分是顶部的按钮。 我们可以将文章的内容和顶部的按钮放在内容区域的一个包上，并将最小高度设置为100vh。 按钮组固定位于包的顶部，子元素的相对定位会覆盖父元素顶部的部分内容。 并且由于默认情况下盒子模型是 content-boxcss3 底部固定，因此我们启用 border-box 盒子模型并同时添加顶部填充。 这样，内容就会被挤压，并且可以为顶部按钮保留顶部填充空间。 放置。
vh是相对厚度单位，vw对应网页的高度和长度。 即，将网页分为100个部分。 100vh是整个屏幕的高度
代码如下所示：
段落{{index}}
按钮
export default {
data() {
return {
data: [],
};
},
mounted() {
for (let i = 0; i < 55; i++) {
this.data.push(i);
}
},
};
#app {
width: 100%;
height: 100vh;
.content {
width: 100%;
min-height: 100%;
position: relative;
/* 子元素相对定位到底就会盖住父元素的底部的一部分内容。又因为盒模型默认是content-box，
所以我们开启border-box盒模型，同时在加上一个底部的padding，这样的话，既会把内容挤上去
同时底部的padding空间就可以留给底部的按钮用以放置。当然别忘了使用定位哦
*/
box-sizing: border-box;
padding-bottom: 40px;
.btns {
width: 100%;
height: 40px;
line-height: 40px;
background-color: #ced;
position: absolute;
bottom: 0;
}
}
}
表格 2（使用 calc() 来估计布局）
这些方法的css代码量会少一点，这也不错。 从结构上来说，内容区域的袋子和按钮的袋子应该并排放置。 按钮的包应设置为固定高度，例如 50px，内容区域的包应使用估计方法 calc(100vh-50px) 设置。 这也将是适应性的。
代码如下所示：
段落{{item}}
按钮
export default {
data() {
return {
data: [],
};
},
mounted() {
for (let i = 0; i < 5; i++) {
this.data.push(i);
}
},
};
#app {
width: 100%;
height: 100vh;
/* 并排放置，一个盒子固定高度，另一个盒子计算高度 */
.content {
width: 100%;
min-height: calc(100vh - 50px);
}
.btns {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #ced;
}
}
表格 3（灵活的盒子布局）
这些方法的结构与之前的形式相同。 启用弹性框后，默认水平布局。 我们更改 Flexbox 的方向，将其更改为垂直布局。 包含按钮的 bag 的高度是固定的，包含内容的 bag 设置为 flex: 1; 让它自由生长，它就会填充剩余的内容，这也可以达到这些粘合布局的效果。
代码如下所示：
段落{{item}}
好文章赞一个
export default {
data() {
return {
data: [],
};
},
mounted() {
for (let i = 0; i < 55; i++) {
this.data.push(i);
}
},
};
#app {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
// 开启弹性盒，修改弹性盒方向，里面的盒子一个固定高度，另一个自由生长
.content {
flex: 1;
}
.btns {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #ced;
}
}
总结
Sticky布局的关键词有min-height、100vh、flex box等，灵活运用效果会更好。 好记性不如坏笔架，记录下来。
最近和鳄鱼聊天（鳄鱼也写博客），鳄鱼说写博客主要是给别人看的，也主要是给自己看的。 想想还真有道理，同志们，共同努力，共同进步
