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

js实现div动态改变大小

2016-02-03 16:54 766 查看

网上看到的相关代码，记下，以备日后使用。

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript div动态大小

相关文章推荐

新的分享

章节导航