您的位置：首页 > Web前端 > CSS

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

2016-09-01 14:45 567 查看
首先了解一下如何将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均有效。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  版权 css html
相关文章推荐
新的分享
章节导航