如何将网页中尾部版权信息固定在网页最末端,且随着窗口变化实现自适应。
来源:互联网 发布:ipad软件 编辑:程序博客网 时间:2024/03/29 14:49
首先了解一下如何将body中的直接子元素固定在网页尾部,代码如下
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { margin: 0; padding: 0; } .footer { height: 50px; background: red; } .abs-bottom{ width: 100%; position: absolute; bottom: 0; left: 0; right: 0; } </style></head><body><div class="content"> 这是内容区域</div><div class="footer abs-bottom"></div><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.js"></script></body></html>
效果如下:
然后我们对浏览器的高度进行调节,会发现它会随着窗口的大小显示在窗口的尾部(若出现滚动条的话(此种情况为网页元素高度低于窗口高度时),会以滚动条顶部为起点,显示在窗口的尾部,若向下拉动滚动条,将不再被固定在底部)。
由于.foot.abs-bottom脱离了文档布局流,所以它是没有高度的,而且其父节点未声明 position: realtive; 其将默认固定在可视窗口的尾部。否则将对其父元素进行定位。
所以在此种情况下,若想实现自适应的话:当网页元素的高度 + 尾部的高度 大于窗口的高度时,使尾部abs-bottom的class去掉即可,如果abs-bottom不存在(即未脱离布局流),则条件是网页元素的高度大于窗口的高度时。反之加上abs-bottom的class
代码如下:
<script> function change() { var $body = $('body'); var $footer = $('.footer'); var bodyHeight = $body.height(); //网页可见元素的高度 var allHeight = bodyHeight; var isAbsExist = false; if($footer.hasClass('abs-bottom')){ //如果尾部存在绝对定位,网页总高度要加上尾部的高度 isAbsExist = true; allHeight += $footer.height(); } if(getWinHeight() < allHeight){ //窗口高度小于网页总高度时 if(isAbsExist){ $('.footer').removeClass("abs-bottom"); } }else { //当窗口高度大于网页总高度时 if(!isAbsExist){ $('.footer').addClass("abs-bottom"); } } } change(); $(window).resize(function(){ //窗口大小改变时进行改变 change(); }) function getWinHeight(){ //获取窗口高度的函数。 var e = window, a = 'inner'; if (!('innerWidth' in window )){ a = 'client'; e = document.documentElement || document.body; } return e[ a+'Height']; }</script>
//注: 注意jQuery对浏览器的兼容性,使用Ie的仿真模式,测试ie 7,8均有效。
0 0
- 如何将网页中尾部版权信息固定在网页最末端,且随着窗口变化实现自适应。
- 当复制网页内容时在尾部加入版权信息
- 网页底部固定版权信息
- footer固定在网页底部且居中,超过一屏自动撑开(最简单的CSS实现)
- 如何在GBK网页中输入版权符号©
- 网页分布版权信息
- JavaScript实现自适应窗口大小的网页
- java web网页实现弹窗,且将当前页面参数传到弹出窗口
- List控件插入标题,且随着窗口变化调整宽度
- CSS实现比例固定且大小随浏览器窗变化的自适应三栏布局
- 网页设计中如何强制固定表格
- div+css中如何将层随着滚动条的移动的初始位置固定在导航栏左下方
- 如何让网页背景图片固定不变 不会随着网页的放大缩小而改变
- 如何将某个层固定在网页的底部,不会随网页右边滚动条的位置而改变
- 如何在网页中加入关闭窗口的按钮?
- 如何在HTML网页中设置弹出窗口的办法
- 如何在HTML网页中设置弹出窗口的办法
- 如何将网页底部始终固定在页面底部而不是浏览器底部
- TextView几种特殊编辑
- The type of the file system is ntfs
- LCD 在uboot和Kernel中的基本流程
- 如何使用snmp计算接口带宽
- oracle archivelog noarchivelog
- 如何将网页中尾部版权信息固定在网页最末端,且随着窗口变化实现自适应。
- 链表的各种操作
- leetcode:bits:Single Number III(260)
- 查看linux使用率
- MEMCACHED源码之main初始化
- 离线人脸识别SDK
- java实现高并发首页访问量(附源码下载地址)
- JNI的基本语法
- 无法获得VMCI驱动程序的版本