-->

WEB资讯

您的当前位置:首页 > 资讯 > JS

js动态修改div高度

2020-08-20 11:12:32  来源:admin 点击:947

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


相关文章更多 >

© 2024版权所有 水水网

电话:171780793