实现左侧固定右侧自适应的两列布局显示效果

Posted 2020-09-28 月半的我们

实现该方法有很多种,我来介绍一下几种比较常见的实现效果:

第一种方案(利用固定定位的方式显示效果):

<style>
        *{
            padding:0;
            margin:0;
        }
        .left-menu,
        .content{
            position:fixed;
            top:0;
            left:200px;
            width:100%;
            height:100%;
            background:red;
            color:#fff;
        }
        .left-menu{
            width:200px;
            left:0;
            background:green;
        }
 </style>   
 <div class="wrapper">
        <div class="left-menu">
            左侧菜单栏
        </div>
        <div class="content">
            右侧自适应
        </div>
    </div>

第二种方案(左侧菜单栏浮动,右侧自适应):　　

<style>
   *{padding:0;margin:0;}
   .left-menu{width:200px;float:left;background:red;height:50px;}
   .content{width:100%;height:50px;background:green}
</style>
 <div class="wrapper">
    <div class="left-menu">
       左侧菜单栏
    </div>
    <div class="content">
       右侧自适应
    </div>
</div>

第三种方案(左右浮动实现效果):

<style>
   *{padding:0;margin:0;}
   .left-menu{width:200px;float:left;background:red;height:50px;}
   .content{width:100%;height:50px;background:green;float:right;margin-right:-200px}
</style>
 <div class="wrapper">
    <div class="left-menu">
       左侧菜单栏
    </div>
    <div class="content">
       右侧自适应
    </div>
</div>

 在这三种方案中比较常见的是第一种,主要应用于后台管理的整体框架,是我比较喜欢的一种解决方案效果