<!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>