自適應佈局的三種方式

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