css上下布局铺满屏幕

最新推荐文章于 2025-05-27 20:24:57 发布

阁下长得好生俊俏

最新推荐文章于 2025-05-27 20:24:57 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/H1069495874/article/details/79084785

CSS 专栏收录该内容

9 篇文章

订阅专栏

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