前言:
此时看官们对“css固定页面底部”大体比较着重,看官们都需要了解一些“css固定页面底部”的相关知识。那么小编同时在网络上汇集了一些关于“css固定页面底部””的相关文章,希望朋友们能喜欢,小伙伴们快快来了解一下吧!问题描述
什么是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等。灵活运用效果会更好。好记性不如烂笔头,记录一下。
最近和一个大佬聊了聊(大佬也写博客),大佬说,写博客,次要是给别问看的,主要是给自己看的。想想的确是很有道理。共同努力,共同进步,同志们
标签: #css固定页面底部