h5开发网站-页面内容不够高时,如何定位footer始终位于页面的最底部

一、问题描述:

在使用h5开发页面时,会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,影响用户视觉。想让页脚始终在页面最底部,我们可能会想到用:

1.min-height来控制content中间内容区高度,来让页面高度能够占满显示屏一屏,但是大型网站页面比较多的情况下footer都是模块化添加进去的,每个页面高度都不会一样,不可能去设置每个页面中间内容区min-height高度,而且用户的显示屏的大小都不一样,无法精确设置min-height高度,无法保证用户看到页面页脚不是在最底部或页面不出现滚动条;

2.页脚固定定位:页脚相对于body固定定位会显示在最底部,但是页面有滚动条时,页面滚动,页脚会悬浮在内容区上,可能以上都不是你想要的效果。

二、解决方式:

以下两种方式都可以解决,亲测好用!

1.第一种方式:

在这里插入图片描述

<body><!-- 头部 --><div class="header">头部</div><!-- 内容--><div class="content">内容部分</div><!-- 产品--><div class="product">产品部分</div>...<!-- 底部 --><div class="footer">底部内容....</div></body><style>body{position: relative; /* 设置定位*/padding-bottom: 360px !important;  /*这个高度等于底部的高度*/box-sizing: border-box;min-height: 100vh;  /*给body设置一个最小高度*/}/* 底部*/.footer {width: 100%;height: 360px; /* 必须要有明确的高度*/overflow: hidden;background: #141419;box-sizing: border-box;position: absolute; /* 设置定位*/bottom: 0px;left: 0px;}/*以上设置在PC端和手机端是没有问题的。*/</style>

2.第二种方式:

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>* {margin: 0;padding: 0;}html,body {height: 100%;font-size:40px;}#container {position: relative;width: 100%;min-height: 100%;padding-bottom: 100px;box-sizing: border-box;}.header {width: 100%;height: 200px;background: orange;}.main {width: 100%;height: auto;min-height: 200px;background: yellow;}.footer {width: 100%;height: 100px;/* footer的高度一定要是固定值*/position: absolute;bottom: 0px;left: 0px;background: green;}</style><body><div id="container"><div class="header">头部</div><div class="main">中间内容</div><div class="footer">底部</div></div></body></html>

OK完成~

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/79597.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VMware16安装ghost版win7

文章目录 准备工作GHO 文件装机工具 新建虚拟机配置虚拟机还需要一个 CD/DVD PE 安装步骤分区还原挂载 CD/DVD开始还原 还原之后 准备工作 GHO 文件 可以去百度搜索这种文件&#xff0c;我这里是从系统之家下载的deepin win7 ghost 系统 装机工具 因为下载的 ghost 版的 w…

【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件

系列文章目录 【Vue】vue2预览显示quill富文本内容&#xff0c;vue-quill-editor回显页面&#xff0c;v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件&#xff0c;在线预览方式一&#xff0c;pdfjs文件包…

什么是高阶成分(HOC)?解释 React 中 render() 的目的?

高阶成分&#xff08;HOC&#xff09;是一种基于React的组合特性而形成的设计模式。 HOC是自定义组件&#xff0c;在其中包裹了另一个组件。他们可以接受任何动态提供的子组件&#xff0c;但不会修改或复制其输入组件中的任何行为。您可以说HOC是"纯"组件1。HOC通过…

计算机丢失mfc140u.dll怎么办,mfc140u.dll丢失的解决方法分享

随着科技的飞速发展&#xff0c;计算机已经成为了人们日常生活和工作中不可或缺的工具。然而&#xff0c;在使用计算机的过程中&#xff0c;用户可能会遇到各种问题&#xff0c;其中计算机丢失 mfc140u.dll 无法运行的问题就是一个比较常见的困扰。小编将从以下几个方面对这个问…

【PythonGIS】解决GIS属性表、矢量字段乱码,中文乱码

我们平时在使用代码处理矢量数据时&#xff0c;可能会出现矢量字段出现乱码的情况。同样有什么打开别人发的矢量文件有可能也会出现这种情况。那么我们该如何解决这个问题&#xff0c;让我们属性表中的中文字符正常显示呢&#xff1f;今天就和大家一起分享一下。 1.原因 ArcGIS…

数据中心液冷服务器详情说明

目录 前言 何为液冷服务器&#xff1f; 为什么需要液冷&#xff1f; 1.数据中心降低PUE的需求 2.政策导向 3.芯片热功率已经达到风冷散热极限 4.液冷比热远大于空气 液冷VS风冷&#xff0c;区别在哪&#xff1f; 1.液冷服务器跟风冷服务器的区别 2.液冷数据中心跟风冷…

MATLAB的输入与输出函数

标题 输入&#xff1a;input() 1. 输入单个数值2. 输入字符串3. 输入以空格隔开的一行数值4. 输入以空格与换行符隔开的多行数值输出 1. disp() (1)输出单个数值(2)输出一维数组(3)输出矩阵(4)输出字符串2. fprintf() (1)输出格式化的单个数值(2)输出格式化的一维数组(3)输出格…

postman导入json脚本文件(Collection v1.0、Collection v2.0)

1. 以postman v8.5.1 版本为例 2. 在postman v5.0.2 低版本中导出json脚本文件, 请选择Collection v2.0 Export - Collection v2 3. 在postman v8.5.1 版本 导入 json脚本文件 Import - Collection v2 - Export - Import

学习尚硅谷HTML+CSS总结

今天主要学习了颜色像素的四种表达方式&#xff0c;在没学习之前也只会一种RGB颜色的表达方式&#xff0c;虽然其他三种使用的比较少&#xff0c;但有些网页会用其他的表达方式写的我们学过之后就会看得懂&#xff0c;还有文本的设置&#xff0c;字体等等&#xff0c;这些都是后…

redis缓存穿透、击穿、雪崩介绍

缓存穿透 概念 缓存穿透指某一特定时间批量请求打进来并访问了缓存和数据库都没有的key&#xff0c;此时会直接穿透缓存直达数据库&#xff0c;从而造成数据库瞬时压力倍增导致响应速度下降甚至崩溃的风险&#xff1b; 解决方案 一、通过布隆过滤器解决 原理&#xff1a;将…

springboot(40) : 数据断流告警

检测逻辑 package com.alibaba.gts.flm.push.data.client.service;import com.alibaba.fastjson.JSONObject; import com.alibaba.gts.flm.push.data.client.common.util.DateUtil; import com.alibaba.gts.flm.push.data.client.service.model.FcoWarningKeyDTO; import com.…

React 全栈体系(七)

第四章 React ajax 一、理解 1. 前置说明 React本身只关注于界面, 并不包含发送ajax请求的代码前端应用需要通过ajax请求与后台进行交互(json数据)react应用中需要集成第三方ajax库(或自己封装) 2. 常用的ajax请求库 jQuery: 比较重, 如果需要另外引入不建议使用axios: 轻…

vue 使用canvas 详细教程

Vue.js 中使用 Canvas Vue.js 是一个流行的 JavaScript 框架&#xff0c;用于构建用户界面。它提供了一种简洁的方式来管理和渲染数据&#xff0c;同时也支持与其他库和工具的集成。要在 Vue.js 中使用 Canvas&#xff0c;您可以按照以下步骤进行操作&#xff1a; 在 Vue.js …

vueshowpdf 移动端pdf文件预览

1、安装 npm install vueshowpdf -S2、参数 属性说明类型默认值v-model是否显示pdf--pdfurlpdf的文件地址String- scale 默认放大倍数 Number1.2 minscale 最小放大倍数 Number0.8 maxscale 最大放大倍数 Number2 3、事件 名称说明回调参数closepdf pdf关闭事件-pdferr文…

Drozer安装

Drozer安装包下载 https://labs.withsecure.com/tools/drozer Drozer需要的python包下载 pip install "pip<21.0" pyOpenSSL pip install "pip<21.0" service_identity pip install "pip<21.0" twisted pip install "pip<…

.netcore对传输类设置区分大小

.Net Core中内置了对Json的转化与解析 可将PropertyNameCaseInsensitive false 设置为区分大小写。

竞赛选题 基于机器视觉的行人口罩佩戴检测

简介 2020新冠爆发以来&#xff0c;疫情牵动着全国人民的心&#xff0c;一线医护工作者在最前线抗击疫情的同时&#xff0c;我们也可以看到很多科技行业和人工智能领域的从业者&#xff0c;也在贡献着他们的力量。近些天来&#xff0c;旷视、商汤、海康、百度都多家科技公司研…

国家网络安全周 | 保障智能网联汽车产业,护航汽车数据安全

9月13日上午&#xff0c;2023年国家网络安全宣传周汽车数据安全分论坛在福州海峡国际会展中心正式举办。本次分论坛主题是“护航汽车数据安全&#xff0c;共促产业健康发展”&#xff0c;聚焦汽车数据安全、个人信息保护、密码安全、车联网安全保险等主题。 与此同时&#xff…

Python requests爬虫豆瓣图片返回数据为空。

爬个豆瓣图片&#xff0c;记录个小问题&#xff0c;发现爬取豆瓣原图的时候拿不到数据&#xff0c;返回为空&#xff0c;爬小图可以&#xff0c;爬其他网站的也都正常&#xff0c;最后发现是header中If-Modified-Since这个参数的原因&#xff0c;加上了就拿不到数据&#xff0c…

辊轧机液压系统泵站比例阀放大器

液压系统主要由液压泵、电机、液压缸、油箱、高压软管等组成。 液压泵将机油从油箱吸入&#xff0c;通过高压软管送至液压缸中&#xff0c;完成动力转换。液压泵的驱动由电机通过皮带或轮齿传动完成。 液压折弯机的液压油流动路线主要分为液压油箱、吸油过滤器、液压泵、主控…