css三种方式实现sticky footer底部黏连布局

问题描述

什么是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等。灵活运用效果会更好。好记性不如烂笔头，记录一下。

最近和一个大佬聊了聊（大佬也写博客），大佬说，写博客，次要是给别问看的，主要是给自己看的。想想的确是很有道理。共同努力，共同进步，同志们