自适应布局的三种方式

高度自适应：利用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 ;
        }

宽度自适应：

第一种:   利用position定位

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