實現左側固定右側自適應的兩列布局顯示效果

實現該方法有不少種,我來介紹一下幾種比較常見的實現效果:

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

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

 在這三種方案中比較常見的是第一種,主要應用於後臺管理的總體框架,是我比較喜歡的一種解決方案效果