css上下布局铺满屏幕

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

        div>
    div>
div>
@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;
}

你可能感兴趣的:(CSS)