设置窗口的自适应大小

    <script type="text/javascript">
        // 窗口的自适应大小
        window.onload = windowHeight; //页面载入完毕执行函数
        function windowHeight() {
            var h = document.documentElement.clientHeight; //获取当前窗口可视操作区域高度
            var bodyHeight = document.getElementById("my-index"); //寻找ID为content的对象
            bodyHeight.style.height = (h - 25) + "px"; //你想要自适应高度的对象
        }
        setInterval(windowHeight, 500)//每半秒执行一次windowHeight函数


    </script>

 body {
            padding-top: 10px;
            padding-bottom: 20px;
            height: 100%;
        }

        .modal-body p span {
            font-family: 微软雅黑;
            font-size: 14px;
            color: black;
        }

        #my-index {
            min-height:200px;
            min-width: 300px;
            background-size: 100%, 100%;
            background-image: url("image/temp01.jpg");
        }

        .logo{
            position: absolute;
            left: 37.5%;
            top: 37.5%;
            border-radius: 10px;
            width: 25%;
            height: 25%;
            background-color: white;
            text-align: center;
        }
        .logo .logo-icon{
            height: 50%;
            width: 80%;
            text-align: center;
            overflow: hidden;
        }
        .logo .logo-icon img{
            width: 100%;
            text-align: center;
            margin: 10% 0 10% 20%;
        }
        .logo .logo-link{
            font-size: 20px;
            font-weight: bold;
            margin-top: 15%;
        }

        .com-intro{
            position: absolute;
            left: 15%;
            top: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-intro p{
            font-size: 50px;
            margin-top: 20%;
        }
        .com-intro-menu{
            display: none;
        }

        .com-products{
            position: absolute;
            right: 15%;
            top: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-products p{
            font-size: 50px;
            margin-top: 20%;
        }

        .com-study{
            position: absolute;
            left: 15%;
            bottom: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-study p{
            font-size: 50px;
            margin-top: 20%;
        }

        .com-join{
            position: absolute;
            right: 15%;
            bottom: 20%;
            border-radius: 20%;
            width: 25%;
            height: 25%;
            background-color: cyan;
            text-align: center;
        }
        .com-join p{
            font-size: 50px;
            margin-top: 20%;
        }