js动态修改div高度
2020-08-20 11:12:32 来源：admin 点击：1287
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
margin:0;
padding:0;
}
#header
{
height: 70px;
background-color: Blue;
}
#middle
{
height: auto;
background-color: Green;
}
#footer
{
height: 30px;
background-color: Gray;
}
</style>
</head>
<body>
<div>
<div id="header">
</div>
<div id="middle">
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">
var winWidth = 0;
var winHeight = 0;
function findDimensions() { //函数：获取尺寸
//获取窗口宽度
if (window.innerWidth) {
winWidth = window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth)) {
winWidth = document.body.clientWidth;
}
//获取窗口高度
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 && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight-100;
winWidth = document.documentElement.clientWidth;
}
//设置div的具体宽度=窗口的宽度的%
if (document.getElementById("middle")) {
document.getElementById("middle").style.height = winHeight + "px";
}
}
findDimensions();
window.onresize = findDimensions;
</script>
</body>
</html>