将HTML的页脚固定在屏幕下方
/*********************************************************************
* 将HTML的页脚固定在屏幕下方
* 说明：
* 处理的方法好像是比较多的，个人还是比较倾向于用JS进行处理。
*
* 2017-8-25 深圳 龙华樟坑村 曾剑锋
********************************************************************/ 一、参考文档：
. 将footer固定在页面底部的实现方法
https://segmentfault.com/a/1190000004453249 二、采用代码：
. HTML：
<body>
<header>header</header>
<main>main content</main>
<footer>footer</footer>
</body>
. CSS：
html,body{margin:;padding: ;}
header{background-color: #ffe4c4;}
main{background-color: #bdb76b;}
footer{background-color: #ffc0cb;} /* 动态为footer添加类fixed-bottom */
.fixed-bottom {position: fixed;bottom: ;width:%;}
. JS：
$(function(){
function footerPosition(){
$("footer").removeClass("fixed-bottom");
var contentHeight = document.body.scrollHeight, //网页正文全文高度
winHeight = window.innerHeight; //可视窗口高度，不包括浏览器顶部工具栏
if(!(contentHeight > winHeight)){
//当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
$("footer").addClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
将HTML的页脚固定在屏幕下方的更多相关文章
- 【转载自W3CPLUS】如何将页脚固定在页面底部
该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...
- 将HTML页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
- 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS
原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...
- html页脚固定在底部的方法
<style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; paddi ...
- 粘性页脚 Sticky Footer 最佳方式
前段时间工作中遇到粘性页脚的需求,以前用过JS控制过,最后发现flex布局是解决这类问题的好帮手. 粘性页脚:即使没有足够的内容填充页面,也要将页脚固定到窗口的底部. <!DOCTYPE htm ...
- C# 给现有PDF文档添加页眉、页脚
概述 页眉页脚是一篇完整.精致的文档的重要组成部分.在页眉页脚处,可以呈现的内容很多,如公司名称.页码.工作表名.日期.图片,如LOGO.标记等.在之前的文章中介绍了如何通过新建一页空白PDF页来添加 ...
- HTML设置固定页脚飘浮
Css /* 页脚 */.footSty{bottom: 0pt; margin: 0pt; position: fixed; width: 100%; z-index: 10 ! important ...
- JQuery Mobile - 固定住页面和页脚
在点击页面空白时候,页眉和页脚会隐藏,在页眉和页脚加入以下代码就可以了: data-tap-toggle ="false" 例子: <div data-role=" ...
- CSS + DIV 让页脚始终保持在页面底部
来源:David's Blog http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...
随机推荐
- linux安装coreseek
coreseek就是一个中文词库加上sphinx组合而成的. 1.下载coreseek 下载到/usr/local/src目录文件下 wget http://www.coreseek.cn/uplo ...
- 【bzoj2734】集合选数（有点思维的状压dp）
题目传送门:bzoj2734 这题一个月前看的时候没什么头绪.现在一看,其实超简单. 我们对于每个在$ [1,n] $范围内的,没有因数2和3的数$ d $,将它的倍数$ 2^a 3^b d $一起处 ...
- SQL映射文件-----MySQL关系映射【1对1，1对多，多对多】
SSM框架下,mapper.xml 中 association 标签和 collection 标签的使用 当数据库中表与表之间有关联时,在对数据库进行操作时,就不只是针对某一张表了,需要联表查询 My ...
- Java 数据结构之双向链表
一.概述: 1.什么是双向链表: 链表中的每个节点即指向前面一个节点,也指向后面一个节点,就像丢手绢游戏一样,每个人都手拉手 2.从头部插入 要对链表进行判断,如果为空则设置尾节点为新添加的节点,如果 ...
- Android开发-ADT Bundle安装
此次安装是在Android Studio的机器上.安装Eclipse是因为目前很多Android程序是Eclipse开发的,要想快速看到运行效果就是安装Eclipse. 1.所有的资源都在:http: ...
- Qwt中鼠标获取坐标点
void getPoint(QwtPlot *plot) { QPoint point = plot->canvas()->mapFromGlobal(QCursor::pos()); Q ...
- UTF-8文件的Unicode签名BOM(Byte Order Mark)问题记录（EF BB BF）
背景 楼主测试的批量发送信息功能上线之后,后台发现存在少量的ERROR日志,日志内容为手机号码格式不正确. 此前测试过程中没有出现过此类问题,从运营人员拿到的发送列表的TXT,号码是符合规则的,且格式 ...
- Java SHA256/Base64转.NET(C#)实现---(华为云云市场.NET版本加密方式)
前言: 工作需要,对接华为云应用市场的 API 接口,由于维护团队都是 .NET 所以用 .NET 来开发. 简单了解一下 SHA256 加密算法,本质就是一个 Hash,与 MD5 相比就是计算量大 ...
- Ansible 小手册系列 三（命令介绍）
仅仅只是介绍,可以选择跳过 ansible ansible是指令核心部分,其主要用于执行ad-hoc命令,即单条命令.默认后面需要跟主机和选项部分,默认不指定模块时,使用的是command模块. Us ...
- magento: Your web server is configured incorrectly. As a result, configuration files with sensitive information are accessible from the outside 解决方案
在linux(以UBUNTU, CENTOS为例)下安装完成magento时,在进入后台时, 有些童鞋可能会发现有如下的提示: Your web server is configured incorr ...