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对象 ...
随机推荐
- 团队项目第二阶段个人进展——Day5
一.昨天工作总结 冲刺第五天,找到了一个专门的提供后端数据服务的网站:leancloud,并学习了相关操作 二.遇到的问题 对leancloud的数据如何请求和响应不懂 三.今日工作规划 深入学习le ...
- (十分钟视频教程)nodejs基础实战教程3:react服务端渲染入门篇
视频截图如下: (具体视频见文末) 前言: 这是小猫的第三篇node教程,本篇内容是由公众号粉丝票选得出的,相信大家对这篇教程是抱有较大希望的,这篇教程由小猫和一位多年的好朋友合作完成(笔名:谷雨,博 ...
- SpringCloud实战-Hystrix线程隔离&请求缓存&请求合并
接着上一篇的Hystrix进行进一步了解. 当系统用户不断增长时,每个微服务需要承受的并发压力也越来越大,在分布式环境中,通常压力来自对依赖服务的调用,因为亲戚依赖服务的资源需要通过通信来实现,这样的 ...
- WireShark基本抓包数据分析
WireShark抓包数据分析: 1.TCP报文格式 • 源端口.目的端口:16位长.标识出远端和本地的端口号. • 顺序号:32位长.表明了发送的数据报的顺序. • 确认号:32位长.希望收到 ...
- 解决WordPress用户名密码都正确但点击登陆就清空密码的问题
作者:荒原之梦 问题产生的环境与问题描述: 今天我在浏览器的书签里将我保存的用于登陆WordPress的书签名字改了一下,之后再登陆WordPress就出现提示说Cookies被阻止,要启用Cooki ...
- 用react重构个人网站 3-23
1: :before 选择器在被选元素的内容前面插入内容 2: float是什么?浮动在CSS中的作用 3:CSS运用在React中的两种方式 使用className属性,CSS内容就用link加 ...
- 解决Apache Web Server的几个错误
一.安装好Apache后服务里没有Apache服务 在命令行进入安装apache的bin目录下,输入命令 httpd.exe -k install -n Apache2.4 二.Apache web ...
- 【译】Flink + Kafka 0.11端到端精确一次处理语义的实现
本文是翻译作品,作者是Piotr Nowojski和Michael Winters.前者是该方案的实现者. 原文地址是https://data-artisans.com/blog/end-to-end ...
- Juint单元测试
********************************************************************************************* 单元测试:集 ...
- dirlock_windows.go
package dirlock type DirLock struct { dir string } func New(dir string) *DirLock { return &a ...