自适应布局的三种方式

高度自适应：利用position定位

<div class="top">200px</div> <div class="main">自适应</div> <div class="bottom">200px</div>

        html,body{             padding:0;             margin:0         }         .top{             width: 100%;             height: 120px;             position: absolute;             top:0;             background-color: greenyellow;         }         .main{             position: absolute;             width: 100%;             top: 120px;             bottom: 120px;             background-color: pink;             height: auto;         }         .bottom{             width: 100%;             position: absolute;             bottom: 0;             height: 120px;             background-color:greenyellow ;         }

宽度自适应：

    <div class="left">200px</div>     <div class="main">自适应</div>     <div class="right">200px</div>

        html,body{             padding:0;             margin:0         }         .left{             width: 120px;             height: 100%;             position: absolute;             left:0;             background-color: greenyellow;         }         .main{             position: absolute;             width:auto;             height: 100%;             left: 120px;             right: 120px;             background-color: pink;         }         .right{             width:120px;             height: 100%;             position: absolute;             right: 0;             background-color:greenyellow ;         }        

第二种： 利用float实现--------------注意这种方式自适应的元素一定放在最下面

    <div class="left">200px</div>     <div class="right">200px</div>     <div class="main">自适应</div>

       html,body{             padding:0;             margin:0;             height: 100%;         }         .main{             width:auto;             /*margin: 0 200px;*/   可以用这种写法代替width:auto的写法             height: 100%;             background-color: pink;         }         .left,.right{             width:200px;             height: 100%;             background-color:greenyellow ;         }         .left{             float:left         }         .right{             float:right         }    

第三种： 利用margin，中间模块先渲染------------注意这种方式的话自适应元素外面一定要加一层父集，并且放在在上面

说明：中间一列优先渲染的自适应三列布局，优先渲染（加载）的关键：内容在html里面必须放在前面。自适应的div必须放在left和right前面且包含在一个父div里。父div，left和right模块都向左浮动，然后对自适应的div（就是父div里的子div）设置margin：0 200px，然后对left的margin-left的属性值设置为100%的负数，就是margin-left：-100%；对right的margin-left的属性值设置为自身宽度的负数，就是margin-left：-200px。

    <div class="mainBox">         <div class="main">自适应</div>     </div>     <div class="left">200px</div>     <div class="right">200px</div>

        html,body{             padding:0;             margin:0;             height: 100%;         }         .mainBox{             width:100%;             height: 100%;             float:left;         }         .main{             height: 100%;             margin:0 200px;             background-color: pink;         }         .left,.right{             width:200px;             height: 100%;             float:left;             background-color:greenyellow ;         }         .left{             margin-left:-100%         }         .right{             margin-left:-200px;         }