HTML5将footer置于页面最底部的方法(CSS+JS)
JavaScript:
<script type="text/javascript">
$(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");
} else {
$("footer").removeClass("fixed-bottom");
}
}
footerPosition();
$(window).resize(footerPosition);
});
</script>
CSS:
.fixed-bottom {
position: fixed;
bottom:;
width:100%;
}
HTML5将footer置于页面最底部的方法(CSS+JS)的更多相关文章
- HTML的footer置于页面最底部的方法
方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...
- HTML的footer置于页面最底部
vue项目中,使用element-ui的布局,仍然出现footer不固定页面底部的情况,网上找到的一个管用的 方法是:footer高度固定+绝对定位 <html> <head> ...
- [JavaScript] css将footer置于页面最底部
<!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-conten ...
- 记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
- footer始终在页面最底部的方法(问题待检验)
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
- jfinal框架页面找不到相关css,js文件404
在JFinalConfig中添加配置: @Override public void configHandler(Handlers handlers) { handlers.add(new Contex ...
- 将HTML页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
- js jquery 页面加载初始化方法
js jquery 页面加载初始化方法 一.js页面加载初始化方法 // 1.在body里面写初始化方法. <body onload='init()'> </body> < ...
- iframe中 父页面和子页面查找元素的方法
从父页面中查找iframe子页面中对象的方法:JS: document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象 ...
随机推荐
- JDK10都发布了,nio你了解多少?
前言 只有光头才能变强 回顾前面: 给女朋友讲解什么是代理模式 包装模式就是这么简单啦 本来我预想是先来回顾一下传统的IO模式的,将传统的IO模式的相关类理清楚(因为IO的类很多). 但是,发现在整理 ...
- Python_socket_UDP
zReceiver.py import socket #使用ipv4协议,使用UDP协议传输数据 s=socket.socket(socket.AF_INET,socket.SOCK_DGRAM) # ...
- MySQL 的性能(下篇)—— 性能优化方法
简介 文中内容均为阅读前辈的文章所整理而来,参考文章已在最后全指明 本文分为上下两篇: 上篇:MySQL 的 SQL 执行分析 下篇:MySQL 性能优化 下面为下篇内容,分为以下部分: 一.创建表时 ...
- Stack编程队列
题目描述:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 首先定义两个栈 Stack<Integer> stack1 = new Stack<I ...
- InnoDB基本特性
Ⅰ.double write 目的:保证数据写入的可靠性 小知识: 什么是partial write? 16k的page只写入了4k,6k,8k,12k就断掉了的情况 corrupt的page就是pa ...
- 玩转Spring MVC(五)----在spring中整合log4j
在前边的基础上,本文主要总结一下如何在spring 中配置log4j,在本文末尾会给出完整项目的链接. 首先是web.xml中要新添加的代码: <!-- 6. 配置log4j --> &l ...
- Visual Studio Code Tips
新项目要用到Visual Studio Code, 在使用的过程中有些tips, 记录下来以便查阅. 1. 自动保存代码 文件 => 自动保存 2. 帮助输入代码模式 扩展 => 安装HT ...
- django(权限、认证)系统——自定义UserProfile储存User额外信息
上篇文章我们引出了Django内置的权限控制系统,讲了安装,和最核心和基本的User模型的API和其Manager的API. 接下来我们继续深入下去,使用User对象做一些事情,首先当然就是创建一个U ...
- Spring IOC(三)依赖注入
本系列目录: Spring IOC(一)概览 Spring IOC(二)容器初始化 Spring IOC(三)依赖注入 Spring IOC(四)总结 目录 1.AbstractBeanFactory ...
- Linux下网站根目录权限
网站根目录权限遵循: 文件644 文件夹755 权限用户和用户组www-data 如出现文件权限问题时,请执行下面3条命令: chown -R www-data.www-data /usr/local ...