首页 > 其他 > 详细

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

时间:2015-12-11 11:22:44      阅读:126      评论:0      收藏:0      [点我收藏+]
<!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>

 

效果图:

         技术分享

 

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

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!