如何将网页中尾部版权信息固定在网页最末端,且随着窗口变化实现自适应。

来源:互联网 发布: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