css设置h5页脚固定底部

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

程序媛养成记

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

阅读量793

点赞数

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

本文链接：https://blog.csdn.net/cxy980626/article/details/122437339

版权

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

摘要由CSDN通过智能技术生成

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

<template>
  <div class="container">
    <!-- 内容 -->
    <div class="page-body">
      这里放页面的内容
    <<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

程序媛养成记

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html5移动端底部固定菜单

06-12

html5移动端底部固定菜单,响应式菜单，根据屏幕大小宽度变化而变化。

参与评论您还未登录，请先登录后发表或查看评论

固定页面头部和底部中间滚动

03-28

为了实现头部和底部固定，我们可以使用CSS（层叠样式表）来控制它们的定位。CSS允许我们用`position`属性设置元素的定位方式。对于头部和底部，我们可以将它们的`position`设置为`fixed`，这会使它们始终固定在屏幕...

移动端H5固定底部导航菜单的三种布局实现

热门推荐

xiaoxiaohui520134的博客

10-11

4万+

http://www.fly63.com/article/detial/859 需求：需要把导航固定在底部？只能滑动内容，导航菜单固定不动的。效果如下：这篇文章主要讲解三种实现方案，包括：fixed,absolute,以及css3的flex布局。 html结构如下： <div class="box"> <div class="roll">滚动区域...

html5如何使页脚置底,CSS如何让页脚固定在页面底部

weixin_36376879的博客

06-03

1612

在进行Web开发实现页面时，可能会遇到这样一种场景：将页脚footer固定在页面的底部，如果页面的主体不能充满屏幕高度，则footer位于屏幕的底部；如果页面的主体超出了屏幕高度，则footer始终位于页面底部。场景的示意如下图，那么如何将页脚始终固定在页面底部呢？一般来说，有两类方法可以达到此目的，一种是仅仅使用css技巧并配合特定的html结构；另一种是使用js代码操作dom元素。本文将介绍三...

h5 固定底部

hualele的专栏

02-21

5158

h5 固定底部

html页脚区域布局与定位教程,HTML定位和布局

weixin_34200416的博客

06-03

699

1、定位体系一共有三种(1)常规流；(2)浮动定位(3)绝对定位2、float属性常用的语法：(1)float：left；左浮动(2)float：right；右浮动(3)float：none；无浮动任何元素都可以使用浮动，无论是块级元素div、ul等等，还是行内元素都可以浮动，任何被声明float的元素都会自动被设置成块元素，有了块级元素的各种特点，可以设置宽高，可以设置内外边距。但是很重要的一个...

让web页面页脚footer固定在页面底部

feinifi的博客

01-08

6149

有时候，我们发现很多页面内容不多的时候，页面底部内容飘到了中间：这个页面底部没有固定，结果...，一个前端工程师是无法接受这样的结果的。这里介绍一种通用的解决办法，让页面底部固定。思路：首先需要一个容器包裹所有的页面元素，这里使用<div id="container"></div>来做。id为container的容器需要设置高度100%,否则，当内容较少的...

H5页面粘滞底部实现方法详解

标题："H5 粘住底部的办法" 所涉及的知识点包括了前端开发中针对移动设备或网页应用设计时的一个常见布局问题，即如何让页面中的元素（比如一个导航栏、工具栏或者底部信息栏）固定在屏幕的底部，即使在用户滚动页面...

移动端布局三种视口_移动H5的meta视口标签、弹性布局原则和背景图片适配

weixin_39579548的博客

12-19

627

很多小伙伴对viewport的理解不是很透彻，于是这一篇重点聊聊viewport(视图)的知识点。以帮助大家更加容易理解移动端H5页面的适配方案。解读移动H5适配最重要的html标签：meta视口标签meta视口标签是是设置理想视口的重要元素，主要用于将布局视口的尺寸和理想视口的尺寸相匹配。meta视口标签存在5个指令：width：设置布局视口的宽度，一般设为device-width。initia...

手机网页H5页面footer页脚显示在底部css代码

jeesr的博客

06-19

1655

手机网页H5页面的footer页脚，当页面很短撑不满手机屏幕时可以显示在屏幕底部，当页面超出手机屏幕长度时，显示在页面内容的后面，不会遮挡内容。 css代码： html{height:100%;}/*min-height不行，不知道为啥*/ body{min-height:100%;padding-bottom:50px;position: relative;box-sizing: border-box } footer{text-align: center;color: #777;position: ab

uniapp开发h5，固定底部被导航栏遮挡问题

wendy_qx的博客

03-06

691

【代码】uniapp开发h5，固定底部被导航栏遮挡问题。

使用viewport-fit=cover来解决关于ios在Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题

weixin_44784401的博客

05-17

1万+

使用viewport-fit=cover来解决关于ios在Safari浏览器内容被地址栏、菜单栏或工具栏遮挡导致的兼容问题，以及设置height: 100% 没有效果的问题

css 计算calc（）兼容火狐

YGangCSDN的博客

07-22

477

css 计算calc（）兼容火狐

height: calc(100vh - 100px)；

fury的博客

09-30

3880

因此，这段代码的意思是将元素的高度设置为视窗高度减去100像素。这样，元素的高度会根据视窗大小自动调整，并且保留一定的空间（100像素）在顶部或底部。其中，vh是视窗的高度单位，表示相对于视窗高度的百分比，1vh等于视窗高度的1%。而px则是像素单位，表示具体的像素数值。这段代码是用来设置元素的高度。它使用了CSS的calc()函数来计算高度值，公式为100vh - 100px。

css通过calc()函数计算高度不生效