css设置h5页脚固定底部

最新推荐文章于 2024-07-07 10:23:32 发布

程序媛养成记

最新推荐文章于 2024-07-07 10:23:32 发布

阅读量818

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/cxy980626/article/details/122437339

前端专栏收录该内容

14 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：将页面拆分为主体内容和页脚两大部分，给内容区域设置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>