CSS全屏布局demo 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<style>
	@charset "utf-8";
body,html{height: 100%;background: #E2E2E2}
body,ul{margin:0;padding:0}
body{font:14px "微软雅黑","宋体","Arial Narrow",HELVETICA;-webkit-text-size-adjust:100%;}
li{list-style:none}
a{text-decoration:none;}

#c_main{
    width: 100%;
    height: 100%;
    background: #000;
}

#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    display: flex;
    top: 50px;
    bottom: 0px;
    left: 0px;
}
.con_left{
    width: 200px;
    height: 100%;
    background: #2b542c;
}
.con_right{
    flex: 1;
    height: 100%;
    color: #ffffff;
    background:#000000;
    overflow: auto;
}

	</style>
</head>
<body>

<div id="c_main">
    <div id="nav"></div>
    <div id="content">
        <div class="con_left"></div>
        <div class="con_right">

        </div>
    </div>
</div>


</body>
<script type="text/javascript">
        // 开关状态
    var open = false;
    $('#nav-btn').click(function (){
                // 按钮状态
        $(this).css("background-color", open ? '#333' : '#222');
        var navBar = $('.nav-bar');
                // 设置header的高度，将导航列表显示出来
        var height = navBar.offset().top + navBar.height();
        $('#header').animate({
            height: open ? 50 : height
        });
                // 修改开关状态
        open = !open;
    });

</script>
</html>

　　

posted @ 2019-08-09 08:45  liehuofeihu  阅读(77)  评论(0)    收藏  举报