Problem description

What is sticky Footer layout

Generally speaking, there is an article in the web page, the article can be long or short, if the article is long, at the end of the article, place a like button. If the post is short, place a like button at the bottom of the page. The general effect is as follows:

It’s the layout stuck to the bottom

The article is shorter:

Longer articles:

implementation

Method 1 (Positioning layout)

Observing the skeleton of the web page, it can be roughly divided into two parts, one is the content of the article, and the other is the button at the bottom. We can put the content of the article and the button at the bottom in a box in the content area, and set the minimum height of the box at 100Vh. The button group Settings are fixed to the bottom of the box, and the child elements are positioned relative to each other to cover part of the bottom of the parent element. Since the box model is content-box by default, we turn on the border-box model and add a padding at the bottom. This way, we can squeeze the content on and leave the padding space for the bottom button.

Vh is relative to length, and vw is relative to the height and width of the page, respectively. Divide the page into 100 pieces. 100vh is the height of the entire screen

The code is as follows:

<template>
  <div id="app">
    <div class="content">
      <p v-for="(item,index) in data" :key="index">Paragraph {{index}}</p>
      <div class="btns">
        <el-button size="small" type="primary">button</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;
    /* The child element is positioned relative to the bottom to cover part of the parent element. Since the box model is content-box by default, we turn on the border-box model and add a padding at the bottom. This way, we can squeeze the content on and leave the padding space for the bottom button. Don't forget to use location */ 
    box-sizing: border-box;
    padding-bottom: 40px;
    .btns {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #ced;
      position: absolute;
      bottom: 0; }}}</style>
Copy the code

Method 2 (use calc() to calculate the layout)

It’s a little less CSS, which is good. Structurally, the content box and the button box should be placed side by side, and the button box should be set to a fixed height, such as 50px. The calculation method of the content box calC (100vH-50px) will also be adaptive.

The code is as follows:

<template>
  <div id="app">
    <div class="content">
      <p v-for="(item,index) in data" :key="index">Paragraph {{item}}</p>
    </div>
    <div class="btns">
      <el-button size="small" type="primary">button</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;
  /* Side by side, one box fixes the height, the other calculates the height */ 
  .content {
    width: 100%;
    min-height: calc(100vh - 50px);
  }
  .btns {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #ced; }}</style>
Copy the code

Method 3 (Elastic box layout)

The structure of this method is the same as that of the previous method. After the elastic box is enabled, the layout is horizontal by default. We changed the orientation of the elastic box to a vertical layout. Flex :1; Button box fixed height, content box set flex:1; Let it grow, and it will fill up the rest of the content, and you can do the same with the sticky layout. The code is as follows:

<template>
  <div id="app">
    <div class="content">
      <p v-for="(item,index) in data" :key="index">Paragraph {{item}}</p>
    </div>
    <div class="btns">
      <el-button size="small" type="primary">Praise a good article</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; // Open the elastic box, modify the direction of the elastic box, one of the boxes is fixed height, the other is free to grow.content {
    flex: 1;
  }
  .btns {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #ced; }}</style>
Copy the code

conclusion

The key words of adhesive layout are min-height,100vh, elastic box Flex, etc. Flexible use will be better. A good memory is better than a bad pen. Write it down.

Recently I had a chat with a big man (big man also writes blog), the big man said, write blog, mainly for don’t ask to see, mainly for myself to see. It makes a lot of sense to think about it. Work together and make progress together, comrades