Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。
base.css
/*base style*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
body{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; color:#333; background-color:#fff; font-size:15px; background-image:url(about:blank); background-attachment:fixed; overflow-x:hidden;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#f60; text-decoration:none;}
img{ border:none; vertical-align:middle; max-width: 100%;}
i,em{ font-style:normal;}
li{ list-style-type:none;}
textarea{ resize:vertical;}
input, select, textarea{ font-family:"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Arial"; background-color:#fff; margin:0; padding:0; outline:none;}
/*global style*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ zoom:1;}
.g-c:after{ clear:both; content:"."; display:block; height:0; visibility:hidden;}
.g-w{ max-width: 1200px; min-width: 980px; width: 96%; margin-left:auto; margin-right:auto;}
.g-hide{ display:none !important;}
全局增加一个负值下边距等于底部高度
demo.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<style>
/*实现的原理*/
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
/*测试代码*/
.content{ background-color: #0066FF; height: 90px; color: #FFFFFF; line-height: 60px;}
.footer{ background-color: #FF6600;}
</style>
</head>
<body>
<div class="wrapper g-w">
<div class="content">
阅谁问君诵，水落清香浮
</div>
<div class="push"></div>
</div>
<div class="footer g-w">
</div>
</body>
</html>
效果图：
相关推荐
基于vue开发H5，使用vant的UI组件开发界面，该简单模板 1. px自动转化响应式rem单位。更容易更高效开发，像素级还原设计稿； 2. axios请求封装； 3. 使用vuex管理底部tabbars的数据，实现权限控制； 4. 下拉刷新，...
微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，如下图。 1. 安全区域是什么意思？ 想要解决内容与小黑线重叠的问题，我们需要先了解清楚苹果对于安全区域...
在移动应用开发领域，Mui和H5+是两种常见的技术栈，用于构建原生感观的Hybrid APP。本篇文章将深入探讨如何利用Mui和H5+实现一个基本功能：通过点击底部导航来切换界面。这是一项基础但至关重要的技能，能够提升用户...
背景 公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部...也就是说，适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。
【H5手机底部图标菜单切换特效】是一种常见的网页交互设计，用于提升移动设备用户体验。在当前的互联网应用中，尤其在手机网页或移动端APP中，底部菜单图标是用户导航的重要组成部分。这种特效使得用户能够轻松地在...
苹果设备（iOS）微信中打开H5页面，从首页跳转到其他页面后，页面的底部会出现一个带有前进和后退按钮工具栏，而该工具栏会遮挡住面底部的内容，影响页面的正常使用。 二、原因分析： 造成该现象的原因是，当页面...
在移动设备上，底部固定菜单（通常称为Footer或Tab Bar）是常见的用户界面元素，它为用户提供了一种方便的方式去访问应用的主要功能。在HTML5中，我们可以利用现代Web技术来创建这种响应式的底部菜单，使其能适应...
微信底部菜单，移动端底部导航菜单，超级牛叉底部固定菜单，样式非常绚丽，H5移动端底部固定菜单栏目，4个打包，需要的下载交流，
当用户在一个H5页面中进行输入操作时，如果该页面是在一个原生应用内打开（即嵌套在原生应用中的WebView中），那么当软键盘弹出时，可能会遮挡住输入框，使得用户无法看到正在输入的内容。这不仅影响了用户的体验，...
抽屉效果，顾名思义，就是如同抽屉一样从页面底部滑动出来的效果，这种设计既不打扰用户的正常浏览，又能在需要时提供必要的信息或功能。 在实现HTML底部弹窗的抽屉效果时，主要涉及以下几个技术点： 1. HTML结构...
例如，`<nav>`元素用于定义导航链接，这正是底部菜单的理想选择。一个简单的底部菜单HTML结构可能如下： ```html <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#...
《H5player-2.1.2：探索与解析》 在数字时代，HTML5（简称H5）作为网页开发的新标准，为开发者提供了丰富的功能和便捷的接口。H5player-2.1.2是一个专门针对H5内容展示的播放器，它旨在提升用户体验，实现更高效、...
【标题】：“h5页面模版源码，很不错的例子” 这个标题暗示了我们讨论的主题是关于HTML5页面模板的源代码。HTML5是现代网页开发的基石，它提供了丰富的功能和元素，使得开发者能够创建出更加交互式、动态且响应式的...
海康平台的H5播放插件是一款专门设计用于在Web环境下播放视频的工具，尤其适用于在浏览器中展示来自海康设备的实时视频流。这款插件的核心特性是其对WebSocket网络协议的支持，使得它能够在HTML5环境中实现低延迟、...
手机H5弹出纯js+css样式制作
本示例“前端H5弹框两个Demo”着重展示了如何在H5页面中实现底部弹出支付方式和弹出表单这两种常见的用户交互功能。 一、底部弹出支付方式 在电商或服务类应用中，底部弹出支付方式是一种常见的交互设计。这种功能...
吴恩达卷积神经网络编程作业三最后需要的目标检测的模型文件，亲测可用，有分的可以给分，没分的参考下面自己生成吧。参考：...执行 生产h5文件： ./yad2k.py yolo.cfg yolo.weights model_data/yolo.h5
在移动端开发中，底部弹框（通常称为Modal或Bottom Sheet）是一种常见的用户界面元素，用于显示重要的信息、操作选项或提示。这篇资源提供了一个关于如何使用JavaScript（js）和层叠样式表（css）实现移动端底部弹框...
首先，H5U系列固件升级包适用于四种型号的设备：H5U、H5U-A8、H5U-A16和H5U-A8S。这些设备可能是某种类型的智能硬件，如网络设备、媒体播放器或者工业控制器。固件是这类设备运行的核心软件，它控制着硬件的操作和...