css设置h5页脚固定底部

最新推荐文章于 2024-08-27 09:00:00 发布

原创最新推荐文章于 2024-08-27 09:00:00 发布 · 854 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何通过CSS实现H5页面的页脚始终保持在底部的效果。主要思路是将页面分为内容区域和页脚两部分，然后对内容区域应用样式min-height: calc(100vh - 120px)来确保页脚始终在视口底部。

思路：将页面拆分为主体内容和页脚两大部分，给内容区域设置css样式：min-height: calc(100vh - 120px);

<template>
  <div class="container">
    <!-- 内容 -->
    <div class="page-body">
      这里放页面的内容
    </div>
    <!-- 页脚 -->
    <div class="page-footer">
       © 余杭晨报 版权所有
    </div>
  </div>
</template>

<style lang="less" scoped>
   .container{
      height:100%;
     .page-body{
     	min-height: calc(100vh - 120px);
     }
   }
</style>