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

css js实现模块内容刚好占全屏

2017-02-20 00:00 239 查看
代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.12.3.js"></script>
<style>
*{margin: 0; padding: 0;}
#mydiv{
width: 100%;
height: auto;
background: url(img/Penguins.jpg) no-repeat 0 0;
background-size: 100%;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script>
$(function(){
function setDivHeight(){
var _height = window.innerHeight;
$("#mydiv").css("height",_height);
console.log(_height);
}
setDivHeight();

$(window).resize(function(){
setDivHeight();
});
});
</script>
</body>
</html>

其实还有更方便的方法，css3的长度单位vw和vh可以实现，但是该单位兼容性不算太好，所以还不是很多人使用
可参考http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航