主页面布局随浏览器大小变化而变化

最新推荐文章于 2023-06-30 23:53:34 发布

weixin_30425949

最新推荐文章于 2023-06-30 23:53:34 发布

阅读量817

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/alvin-perfect/p/5038410.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="jquery.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding:0;
            margin: 0;
            position: relative;

        }
        #aa {
            width: 100%;
            height: 100%;
            background-color: #CB0011;
        }

        #left{
            width: 20%;
            height: 100%;
            position: absolute;
            background-color: aqua;
        }
        #content{
            width: 80%;
            height: 100%;
            float: right;
            background-color: bisque;
        }
        #search{
            width: 100%;
            height: 50px;
            position: absolute;
            top: 0;
            background-color: coral;
        }
       #type{
            width: 100%;
            height: calc(100% - 50px);
            overflow:auto;
            background-color: darkcyan;
        }

       #create{
            width: 100%;
            height: 50px;
            position: absolute;
            bottom: 0;
            background-color: deeppink;
        }

        .scroll-y{
            overflow-y: auto;
        }
    </style>

</head>

<body >
<div id="aa">

    <div id="left">
        <div style="width: 100%;height: 100%">
            <div id="search"></div>
            <div id="type" ></div>
            <div id="create"></div>
        </div>
        
    </div>
    <div id="content"></div>
</div>

<script language="javascript" type="text/javascript">
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();

    $('#aa').css('height', viewportHeight + 'px');
    $('#aa').css('width', viewportWidth + 'px');

    $(window).resize(function() {
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();

        $('#aa').css('height', viewportHeight + 'px');
        $('#aa').css('width', viewportWidth + 'px');
    });
</script>
</body>
</html>

效果图：