天天看点

js实现容器的大小随窗口而改变

两种方法

方法1

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>等高等宽</title>

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

    <script>

        function count(){

            var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

            var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

            document.getElementById("box").style.width=w+"px";

            document.getElementById("box").style.height=h+"px";

        };

    </script>

</head>

<style type="text/css">

    *{

        margin:0;

        padding:0;

    }

    #box{

        background:block;

    }

</style>

<body οnlοad="count()">

<div id="box">等高等宽</div>

</body>

</html>

方法2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

    <TITLE>等宽等高 </TITLE>

</HEAD>

<body style="margin:0;">

<div id="mydiv" style="border:1 solid black; background-color:red" ></div>

</body>

<script type="text/javascript">

    var mydiv=document.getElementById("mydiv");

    var mydiv_resize=function(){

        mydiv.style.width=document.body.clientWidth;

        mydiv.style.height=document.body.clientHeight;

    }

    mydiv_resize();

    window.οnresize=mydiv_resize;

</script>

</HTML>

复制过去即可使用

继续阅读