js,jquery 控制元素高度自适应

最新推荐文章于 2020-05-06 10:58:07 发布

athiz4488943

最新推荐文章于 2020-05-06 10:58:07 发布

阅读量475

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lml-26/p/10341171.html

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head> 
	<style>
		*{
			margin:0;
			padding:0;
		}
		div{
			width:100%;
			background:#1B6D85;
		}
	</style>
	<body>
		<div id="div1" style="background:#1B6D85;"></div>
		<div id="div2" style="background:#000000;"></div>
		<div id="div3" style="background:#122B40"></div>
		<div id="div4" style="background:#255625"></div>
	</body>
</html>
<script type="text/javascript" src="jquery/jquery-3.1.0.min.js"></script>
<script>
	$(window).resize(function () {//当浏览器大小变化时
	    autodivheight("div1",0.2);
		autodivheight("div2",0.1);
		autodivheight("div3",0.2);
		autodivheight("div4",0.5);
	});
	autodivheight("div1",0.2);
	autodivheight("div2",0.1);
	autodivheight("div3",0.2);
	autodivheight("div4",0.5);
	function autodivheight(id,size){ //函数：获取尺寸id为元素的id,size为所占屏幕比例
	    //获取浏览器窗口高度
	    var winHeight=0;
	    if (window.innerHeight)
	        winHeight = window.innerHeight;
	    else if ((document.body) && (document.body.clientHeight))
	        winHeight = document.body.clientHeight;
	    //通过深入Document内部对body进行检测，获取浏览器窗口高度
	    if (document.documentElement && document.documentElement.clientHeight)
	        winHeight = document.documentElement.clientHeight;
	    //DIV高度为浏览器窗口的高度
	    document.getElementById(id).style.height= size*winHeight +"px";
	}

</script>

转载于:https://www.cnblogs.com/lml-26/p/10341171.html

athiz4488943

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js,jquery 控制元素高度自适应

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{ margin:0; padding:0; } div...
复制链接

扫一扫