CSS three ways to achieve sticky footer bottom adhesive layout

Time:2021-10-17

Problem description

What is sticky footer layout

For example, there is an article on the web page, which can be long or short. If the article is relatively long, place a like button at the end of the article. If the article is short, place a like button at the bottom of the page. The general effect drawing is as follows:

It’s the layout glued to the bottom

The article is short:
CSS three ways to achieve sticky footer bottom adhesive layout
When the article is long:
CSS three ways to achieve sticky footer bottom adhesive layout

Implementation mode

Mode 1 (positioning layout)

Observe the skeleton of the web page, which is roughly divided into two parts. One part is the article content, and the other part is the button at the bottom. We can put the article content and the button at the bottom in a box in the content area, and set the minimum height of the box to 100vh. The button group setting is fixed to the bottom of the box, and the relative positioning of the child element to the bottom will cover part of the bottom of the parent element. Because the box model is content box by default, we open the border box model and add a padding at the bottom. In this way, the content will be squeezed up, and the padding space at the bottom can be left for the buttons at the bottom.

VH is the relative length unit, and VW is the corresponding length unit, which is relative to the height and width of the web page. That is, divide the web page into 100 parts. 100vh is the height of the whole 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 relative positioning of the child element to the bottom covers part of the bottom of the parent element. And because the box model defaults to content box,
    So we open the border box model and add a padding at the bottom. In this way, we will squeeze the content
    At the same time, the padding space at the bottom can be reserved for the buttons at the bottom. Of course, don't forget to use positioning
    */ 
    box-sizing: border-box;
    padding-bottom: 40px;
    .btns {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #ced;
      position: absolute;
      bottom: 0;
    }
  }

}
</style>

Mode 2 (Calc () is used to calculate the layout)

The amount of CSS code in this way will be less, which is good. Structurally, the box in the content area and the box containing the button shall be placed side by side. The box containing the button shall be set with a fixed height, such as 50px. The box containing the content area shall be set with the calculation method Calc (100vh-50px), which will also be realized adaptively.
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;
  /*Placed side by side, one box is fixed in height, and the other box is calculated in height*/ 
  .content {
    width: 100%;
    min-height: calc(100vh - 50px);
  }
  .btns {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #ced;
  }
}
</style>

Mode 3 (elastic box layout)

The structure of this method is consistent with that of the previous method. After the elastic box is opened, the default horizontal layout. We change the orientation of the elastic box to a vertical layout. The height of the box containing the button is fixed, and the box containing the content is set with flex: 1; Let it grow freely, it will fill up the remaining content, and this adhesive layout can also be achieved.
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" > a good article likes a < / 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 and change the direction of the elastic box. The box inside has a fixed height and the other grows freely
  .content {
    flex: 1;
  }
  .btns {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #ced;
  }
}
</style>

summary

The keywords of adhesive layout are min height, 100vh, elastic box, flex, etc. The effect will be better if it is used flexibly. A good memory is better than a bad pen. Record it.

Recently, I chatted with a big man (the big man also writes a blog). The big man said that blogging is mainly for yourself. It makes sense to think about it. Work together and make progress together, comrades