stickyFooter布局

前言

关于sticky-footer的布局，做个笔记！

相关代码

<template>
  <div class="content-container">
    <div class="content-header"></div>
    <!--这么布局的原因是为了实现sticky-footer-->
    <div class="content-main"></div>
    <div class="content-footer"></div>
  </div>
</template>
<style lang="scss" scoped>
  .content-container {
    height: 100%;
    min-width: 1200px;
    min-height: 100%;

    .content-header {
      position: absolute;
      width: 100%;
      min-width: 1200px;
      height: 98px;
      z-index: 999;
      background-color: #fff;
    }

    .content-footer {
      position: relative;
      margin-top: -62px;
      clear: both;
      width: 100%;
    }

    .content-main {
      height: auto;
      min-height: 100%;
      padding-top: 98px;
      background: #F9F9F9;
      padding-bottom: 62px; 
    }
  }
</style>

赏

谢谢你请我吃糖果