绝对定位实现内容块自适应宽度布局（简化模型）

本文根据《网页布局基础》第四章绝对定位布局教程内容进行整理，对通过position属性的设置实现未定义宽度大小的部分自适应宽度布局，这篇代码为简化模型，以便于参考，下一篇文章我将应用该简化模型实现一个稍微复杂的页面。关键解释说明见代码相关位置

    *{
 margin: 0;
 padding: 0;
 font-size: 20px;
 font-family: Verdana,"微软雅黑","宋体";
    }
    #wrap{
 width: 80%;
 margin:0 auto;
    }
    #head{
 background-color: green;
 position: absolute;
 top: 0;
 width: inherit;
 height: 60px;
    }
    #mainbody{
 background-color: yellow;
 height: 700px;
 margin: 70px 0;
 position: relative;  
    }
    .sidebar{
 background-color: blue;
 width: 180px;
 height: 500px;
    }
    .content{
 background-color: #fff;
 position: absolute;  
 top: 0;  
 margin-left: 200px;  
    }
    #footer{
 background-color: rgba(0,0,0,0.3);
 position: fixed;
 bottom: 0; 
 width: inherit;
 height: 60px;
    }




    
 头部
 
     
  左侧边栏
     
     
  右侧内容
     
 
 尾部