基础html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Learning TypeScript</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.main{
text-align: center;
}
.padding_top{
padding-top: 350px;
}
.footer{
position: absolute;
bottom:0;
display: block;
left:0;
width:100%;
background: url("http://static.98ep.com/Img/jueweiDuckNeck/duck_bg_thr.png") center bottom no-repeat;
background-size:auto 60px;
height: 60px;
z-index: -1;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="padding_top">padding-top</div>
<input type="text" name="" />
</div>
<div class="footer">
</div>
</body>
</html>
加入js后
<script>
var oHeight = $(document).height(); //屏幕当前的高度
$(window).resize(function(){
if($(document).height() < oHeight){//当文档的高度改变并小于oheight时
$(".footer").css("display","none");
}else{
$(".footer").css("display","block");
}
});
</script>
网友评论