共计 2558 个字符，预计需要花费 7 分钟才能阅读完成。
问题形容
什么是 sticky footer 布局
举例来说，就是在网页中有一篇文章，文章可长可短，如果文章比拟长，就在文章完结的中央，搁置一个点赞按钮。如果文章比拟短，就在页面的底部搁置一个点赞按钮。大抵效果图如下：
就是黏在底部的布局
文章较短时：
文章较长时：
实现形式
形式一（定位布局）
察看网页的骨架，大抵分为两局部，一部分是文章内容，另外一部分底部的按钮，咱们能够把文章的内容和底部的按钮都放在一个内容区的盒子外面，给盒子设置最小高度 100vh。按钮组设置固定定位到盒子的最底部，子元素绝对定位到底就会盖住父元素的底部的一部分内容。又因为盒模型默认是 content-box，所以咱们开启 border-box 盒模型，同时在加上一个底部的 padding，这样的话，既会把内容挤上去同时底部的 padding 空间就能够留给底部的按钮用以搁置。
vh 是绝对的长度单位，对应的还有 vw，别离是绝对于这个网页的高度和宽度的。即把网页分成 100 份。100vh 就是整屏的高度
代码如下：
<template>
<div id="app">
<div class="content">
<p v-for="(item,index) in data" :key="index"> 段落 {{index}}</p>
<div class="btns">
<el-button size="small" type="primary"> 按钮 </el-button>
</div>
</div>
</div>
</template>
<script>
export default {data() {
return {data: [],
};
},
mounted() {for (let i = 0; i < 55; i++) {this.data.push(i);
}
},
};
</script>
<style lang="less" scoped>
#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;
}
}
}
</style>形式二（应用 calc() 计算布局）
这种形式的 css 代码量会少一点，还不错。构造上，要把内容区的盒子和装按钮的盒子并排搁置，装按钮的盒子设置固定高度，比方 50px，装内容区的盒子设置计算形式 calc(100vh-50px) 这样也会自适应实现。
代码如下：
<template>
<div id="app">
<div class="content">
<p v-for="(item,index) in data" :key="index"> 段落 {{item}}</p>
</div>
<div class="btns">
<el-button size="small" type="primary"> 按钮 </el-button>
</div>
</div>
</template>
<script>
export default {data() {
return {data: [],
};
},
mounted() {for (let i = 0; i < 5; i++) {this.data.push(i);
}
},
};
</script>
<style lang="less" scoped>
#app {
width: 100%;
height: 100vh;
/* 并排搁置，一个盒子固定高度，另一个盒子计算高度 */
.content {
width: 100%;
min-height: calc(100vh - 50px);
}
.btns {
width: 100%;
height: 50px;
line-height: 50px;
background-color: #ced;
}
}
</style>形式三（弹性盒布局）
这种形式的构造和上一种形式的构造统一。开启弹性盒当前，默认程度布局。咱们批改弹性盒的方向，将其批改成垂直布局。装按钮的盒子固定高度，装内容的盒子设置 flex:1; 让其自在成长，就会填满残余内容，也能够做到这种黏连布局的成果。
代码如下：
<template>
<div id="app">
<div class="content">
<p v-for="(item,index) in data" :key="index"> 段落 {{item}}</p>
</div>
<div class="btns">
<el-button size="small" type="primary"> 好文章赞一个 </el-button>
</div>
</div>
</template>
<script>
export default {data() {
return {data: [],
};
},
mounted() {for (let i = 0; i < 55; i++) {this.data.push(i);
}
},
};
</script>
<style lang="less" scoped>
#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;
}
}
</style>总结
黏连布局的关键字就是，min-height,100vh, 弹性盒 flex 等。灵活运用成果会更好。好忘性不如烂笔头，记录一下。
最近和一个大佬聊了聊（大佬也写博客），大佬说，写博客，主要是给别问看的，次要是给本人看的。想想确实是很有情理。共同努力，共同进步，同志们
