js实现div动态改变大小

来源：互联网发布：vb.net excel另存为编辑：程序博客网时间：2024/05/20 13:15
网上看到的相关代码，记下，以备日后使用。
<!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>
0 1