js实现div动态改变大小

痛定思痛。 2022-08-20 06:09 358阅读 0赞

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

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