html 页面底部固定 footer

我们在编写html页面的时候总是希望footer 永远固定在最底部，最下面的footer 如果我们采用绝对定位当内容的告诉大于屏幕的高度的时候，我们发现底部这个时候就会一直保持在屏幕的底部，甚至将内容覆盖

当我们使用相对定位的时候，如果内容的高度是大于屏幕的高度还好，如果小于屏幕的高度，发现底部就不固定在底部了，而是在内容的下面，有时候到屏幕的中间了

所以无论采用相对定位还是绝对定位，都没有办法实现我们想要的结果，内容的最底部和屏幕的最底部，我们只有通过js来动态的控制，实现footer 始终在对底部，那么这个js 应该怎么写

// 解决底部固定的问题
function autoFooter() {var flag=true;$("#footer").css({"position":"absolute"})if(flag){setTimeout(function(){console.log("...............底部自动定位1000......");// 获取内容的高度var bodyHeight = $("body").height();// 获取显示屏的高度var iHeight = document.documentElement.clientHeight || document.body.clientHeight;var footerHeight=$("#footer").height();flag=false;if (bodyHeight+footerHeight > iHeight) {$("#footer").css({"position":"relative","bottom":"0px","left":"0px","right":"0px"});}else{$("#footer").css({"position":"absolute","bottom":"0px","left":"0px","right":"0px"});}}, 1000);}if(flag){setTimeout(function(){console.log("...............底部自动定位500......");// 获取内容的高度var bodyHeight = $("body").height();// 获取显示屏的高度var iHeight = document.documentElement.clientHeight || document.body.clientHeight;var footerHeight=$("#footer").height();flag=false;if (bodyHeight+footerHeight > iHeight) {$("#footer").css({"position":"relative","bottom":"0px","left":"0px","right":"0px"});}else{$("#footer").css({"position":"absolute","bottom":"0px","left":"0px","right":"0px"});}}, 500);}
}

这段代码就是就是根据内容的高度和屏幕的高度大小来动态的设置相对定位和自动定位

当内容的高度比屏幕的高度要大的时候，要使用相对定位

如果内容的高度小于屏幕的高度，要用相对定位

这个代码需要放在一个通用的js，在每个页面都要引入，定位在页面加载的时候调用

并且底部的id = "footer" 这个根据自己的需要设置

注意：点击分页之后，内容高度发生编号，可以在点击分页之后重新执行autoFooter 方法

希望对你有所帮助！

html 页面底部固定 footer相关推荐

flex 底部固定_小猿圈网站页面底部固定的方法
网络发展到了今天,很多朋友对于网站已经不陌生了,但是当我们看网页时你注意到网站的底部了吗?虽然很少人会注意到他,但是如果不在底部的话,会很难看,今天小猿圈web前端讲师就为你介绍网站页面底部固定的方法 ...
如何将footer标签固定在底部_div footer标签css实现位于页面底部固定
作为一个页面仔你一定遇到过:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看 ...
flex 底部固定_详解八种方法实现CSS页面底部固定
当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底部, 方法一:footer高度固定+绝 ...
mysql事务怎么加排他锁_八种方法实现CSS页面底部固定 - SegmentFault 思否
共享锁.排他锁 InnoDB 实现了两种类型的锁机制:共享锁(S)和排他锁(X).共享锁允许一个事务读数据,不允许修改数据,如果其他事务要再对该行加锁,只能加共享锁:排他锁是修改数据时加的锁,可以读取 ...
footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body><header>头部</header><main>中间内容</main> ...
使用css弹性布局，让页面footer底部固定
在前端开发过的工作中,footer永远固定在底部的需求.也就是说一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部.我们知道,当内容足够多可以撑开底部到达浏 ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...
如何将footer标签固定在底部_让footer固定在页面底部
最近做了几个触屏版页面,页面比较简单,内容短,但是都有个底部,面对各种机型,底部不是一直处于底部位置,长屏.高分辨率的机子上的表现是悬在半空中,就像一根刺卡在喉咙啊.为此做了几种尝试. 其中有个活动的 ...
如何将footer标签固定在底部_如何将页脚固定在页面底部(多种方法实现)
作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的"footer"部分随着飘上来,处在页面的半腰中间,给视觉效果 ...

html 页面底部固定 footer

html 页面底部固定 footer相关推荐

最新文章

热门文章

html 页面 底部固定 footer

html 页面 底部固定 footer相关推荐

最新文章

热门文章

html 页面底部固定 footer

html 页面底部固定 footer相关推荐