当前位置： 首页 > news >正文

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

news 2026/2/9 22:29:24

一、问题描述：

在使用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;}/* 底部*/.footer {width: 100%;height: 360px; /* 必须要有明确的高度*/overflow: hidden;background: #141419;box-sizing: border-box;position: absolute; /* 设置定位*/bottom: 0px;left: 0px;}/*以上设置在PC端上是没有问题的，*//*但是如果是手机端，还需要加入以下代码：*/@media only screen and (max-width:768px) {body{min-height: 100vh;  /*给body设置一个最小高度*/}}</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完成~

在这里插入图片描述

相关文章：

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

一、问题描述&#xff1a; 在使用h5开发页面时&#xff0c;会遇到这个情况&#xff1a;当整个页面高度不足以占满显示屏一屏&#xff0c;页脚不是在页面最底部&#xff0c;影响用户视觉。想让页脚始终在页面最底部&#xff0c;我们可能会想到用&#xff1a; 1.min-height来控…...

编程日记 2023/9/9 18:58:25

手机也可以搭建个人博客？安卓Termux+Hexo搭建属于你自己的博客网站【cpolar实现公网访问】

文章目录 前言 1.安装 Hexo2.安装cpolar3.远程访问4.固定公网地址 前言 Hexo 是一个用 Nodejs 编写的快速、简洁且高效的博客框架。Hexo 使用 Markdown 解析文章&#xff0c;在几秒内&#xff0c;即可利用靓丽的主题生成静态网页。 下面介绍在Termux中安装个人hexo博客并结合…...

编程日记 2023/9/9 18:57:24

Support for password authentication was removed on August 13, 2021 解决方案

打开你的github&#xff0c;Setting 点击Developer settings。 点击generate new token 按照需要选择scope 生成token&#xff0c;以后复制下来。 给git设置token样式的remote url git remote set-url origin https://你的tokengithub.com/你的git用户名/仓库名称.git然后就可…...

编程日记 2023/9/9 18:56:22

MPP 与 SMP 的区别，终于有人讲明白了【文末送书】

文章目录 导读01 SMP1. SMP 的典型特征2. SMP的优缺点 02 分布式MPP计算架构1. MPP 架构核心原理2. MPP 典型特征3. MPP优缺点 写作末尾 导读 当今数据计算领域主要的应用程序和模型可大致分为在线事务处理&#xff08;On-line Transaction Processing &#xff0c;OLTP&#…...

编程日记 2023/9/9 18:55:21

华为OD机试真题【寻找最大价值的矿堆】

1、题目描述 【寻找最大价值的矿堆】 给你一个由 ‘0’&#xff08;空地&#xff09;、’1’&#xff08;银矿&#xff09;、’2’&#xff08;金矿&#xff09;组成的的地图&#xff0c; 矿堆只能由上下左右相邻的金矿或银矿连接形成。超出地图范围可以认为是空地。 假设银矿…...

编程日记 2023/9/9 18:54:20

Java Maven 项目读取项目版本号

java读取 pom.xml 文件中设置的版本号 1. 在 src/main/resources/下新建 app.properties 文件&#xff1a; app.version${project.version} 2. 在pom.xml 中增加 <build> <resources> <resource> <directory>src/main/resources</di…...

编程日记 2023/9/9 18:53:19

Lesson4-1:OpenCV图像特征提取与描述---角点特征

学习目标 理解图像的特征知道图像的角点 1 图像的特征 大多数人都玩过拼图游戏。首先拿到完整图像的碎片&#xff0c;然后把这些碎片以正确的方式排列起来从而重建这幅图像。如果把拼图游戏的原理写成计算机程序&#xff0c;那计算机就也会玩拼图游戏了。 在拼图时&#xff…...

编程日记 2023/9/9 18:52:16

C++ 基础（一）题目练习

一、使用输出运算符输出一个长方形&#xff0c; 如下图所示&#xff1a; #include <iostream> using namespace std; int main() {cout << "*******" << endl;cout << "*******" << endl;cout << "*******"…...

编程日记 2023/9/9 18:51:15

Webpack5入门到原理

Webpack5学习 尚硅谷Webpack5新版视频教程 B站直达&#xff1a;https://www.bilibili.com/video/BV14T4y1z7sw 百度网盘&#xff1a;https://pan.baidu.com/s/114lJRGua2uHBdLq_iVLOOQ 提取码&#xff1a;yyds 阿里云盘&#xff1a;https://www.aliyundrive.com/s/UMkmCzdWsGh&…...

编程日记 2023/9/9 18:50:15

地形有通挂支隘险远六种情况

地形有通、挂、支、隘、险、远六种情况 【安志强趣讲《孙子兵法》第34讲】 第十一篇&#xff1a;地形篇 【全文大白话】 地形有各种情况&#xff0c;行军有各种情况&#xff0c;用好地形获得交战的主动权。 【原文】 孙子曰&#xff1a;地形有通者&#xff0c;有挂者&#xff0…...

编程日记 2023/9/9 18:49:13

C++多态案例-设计计算器类

1.前置知识点 多态是面向对象的三大特性之一 多态分为两类 静态多态&#xff1a;函数重载和运算符重载都属于静态多态&#xff0c;复用函数名动态多态&#xff1a;派生类和虚函数实现运行时多态 静态多态和动态多态的区别 静态多态的函数地址早绑定-----编译阶段确定函数地…...

编程日记 2023/9/9 18:48:13

复制tr的一行数据或者复制数据使用，使用jq和php

效果图&#xff1a; 2.Html <!--复制的tr数据&#xff0c;s----------------------------------------------------------------------------------------------->{foreach from$arrs keykk itemvv} <tr><td style"text-align:center;" >1</t…...

编程日记 2023/9/9 18:47:11

软件测试的基础（1）

程序员(开发) :编写程序代码（实现产品需求） 产品:收集并设计需求-需求文档（根据用户需求进行产品设计） UI设计师:设计界面，向外展示的形态 前端:用代码实现页面的显示 DBA:数据库设计（系统数据之间的关联） 运维:版本控制和发布、升级迭代,环境搭建和维护 客服:客户支持,…...

编程日记 2023/9/9 18:46:09

基于Java+SpringBoot+Vue前后端分离库存管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

编程日记 2023/9/9 18:45:06

Secrets in Kubernetes (K8s)

摘要 在Kubernetes&#xff08;K8s&#xff09;中&#xff0c;Secrets是一种用于存储敏感数据的资源对象。它可以用于存储密码、API密钥、数据库凭证等敏感信息&#xff0c;以便在应用程序中使用。 设计实现说明如下&#xff1a; 加密存储&#xff1a;Kubernetes使用Base64编…...

编程日记 2023/9/9 18:44:06

模板测试和深度测试在cocoscreator中的应用

模板测试(Stencil Test)&#xff1a; 当片段着色器处理完一个片段之后&#xff0c;模板测试(Stencil Test)会开始执行&#xff0c;和深度测试一样&#xff0c;它也可能会丢弃片段。接下来&#xff0c;被保留的片段会进入深度测试&#xff0c;它可能会丢弃更多的片段。模板测试…...

编程日记 2023/9/9 18:43:05

手机便签功能在哪里？如何在便签里添加文字图片视频？

手机已成为我们生活中不可或缺的工具&#xff0c;而在使用手机的过程中&#xff0c;我们经常需要随手记录一些重要的事情。那么&#xff0c;如何高效便捷地记录这些事情呢&#xff1f;答案就是使用手机便签软件。但是&#xff0c;有很多人不知道手机便签功能在哪里&#xff1f;…...

编程日记 2023/9/9 18:42:04

Java 中 List 的 7 种遍历方式 及 性能对比

# for i 循环 for (int i 0; i < list.size(); i) {list.get(i); }# 增强for循环 for (int item : list) { }# iterator for 循环 for (Iterator<Integer> iterator list.iterator(); iterator.hasNext(); ) {iterator.next(); }# iterator while 循环 Iterator<…...

编程日记 2023/9/9 18:41:02

【Github】git本地仓库建立与远程连接

文章目录 前言一、git简介二、git下载2.1下载地址 三、git安装3.1安装3.2 配置3.3 config设置&#xff08;增删改查&#xff09; 四.github与git连接——本地Git仓库4.1 建本地的版本库4.2 源代码放入本地仓库4.3提交仓库 五、github与git的连接——远程连接5.1 创建SSH Key5.2…...

编程日记 2023/9/9 18:38:59

【瑞萨零基础入门】瑞萨MCU零基础入门系列教程（更新连载中）

瑞萨MCU零基础入门系列教程 前言 得益于瑞萨强大的MCU、强大的软件开发工具(e studio)&#xff0c;也得益于瑞萨和RA生态工作室提供的支持&#xff0c;我们团队编写了《ARM嵌入式系统中面向对象的模块编程方法》&#xff0c;全书37章&#xff0c;将近500页: 讲解面向对象编程…...

编程日记 2023/9/9 18:37:58

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现，设计原则设计原则是设计模式的理论基石， 设计模式 在经典的设计模式分类中（如《设计模式：可复用面向对象软件的基础》一书中），总共有23种设计模式，分为三大类： 一、创建型模式（5种） 1. 单例模式（Sing…...

编程新知 2025/12/14 20:57:41

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/1/23 12:16:56

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

TRS收益互换：跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

编程新知 2025/11/2 0:31:23

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2026/2/5 5:24:23

stm32wle5 lpuart DMA数据不接收

配置波特率9600时&#xff0c;需要使用外部低速晶振...

编程新知 2026/2/4 16:29:27

Elastic 获得 AWS 教育 ISV 合作伙伴资质，进一步增强教育解决方案产品组合

作者&#xff1a;来自 Elastic Udayasimha Theepireddy (Uday), Brian Bergholm, Marianna Jonsdottir 通过搜索 AI 和云创新推动教育领域的数字化转型。 我们非常高兴地宣布&#xff0c;Elastic 已获得 AWS 教育 ISV 合作伙伴资质。这一重要认证表明&#xff0c;Elastic 作为 …...

编程新知 2026/2/7 16:38:17