常用的佈局方式

1）兩列布局、左邊固定、右側自適應

第一種實現方式：把左邊的寬高寫死，右邊的div用相對定位定位過去，把左側的div的位置讓出來

    <div class="box1"></div>
    <div class="box2"></div>

        .box1 {
            width: 200px;
            height: 400px;
            background: #ff5d00;
        }
        .box2 {
            height
 
: 400px;
            background: green;
            position: relative;
            left: 202px;
            top: -400px;
        }

第二種實現方式：div1可以用浮動或者絕對定位，使其脫離文件流，然後div2就會被蓋住了，然後為div2設定一個margin-right，讓其自己漏出來

    <div class="box1"></div>
    <div class="box2"></div>

        .box1
 
 {
            width: 200px;
            height: 400px;
            background: #ff5d00;
            /*float: left;*/
            position: absolute;
        }
        .box2 {
            height: 400px;
            background: green;
            margin-left: 202px;
        }

2）三列布局、左右固定、中間自適應

左右的div寬高寫死，一個左浮動，一個右浮動，中間的不設定寬度，然後設一個左右外邊距，讓自己露出來，要不有一部分就蓋在了下面

    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>

        .left , .right {
            width: 200px;
            height: 400px;
            background: #ff5d00;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .center {
            height: 400px;
            background: green;
            margin: 0 202px;
        }

3）三列布局、頭尾固定、中間自適應（手機常用的佈局）

把header和footer都固定定位，一個top設為0，另一個bottom設為0
中間的div設為絕對定位，然後把top和bottom讓出來，防止蓋住，left和right都設為0，這樣就伸開了。
為了使中間的內容有滾動條，中間的div加一個overflow: scroll

    <div class="header">header</div>
    <div class="content">
        content <br>
        content <br>
        ...
        ...
    </div>
    <div class="footer">footer</div>

        .header , .footer {
            height: 30px;
            background: #ff0000;
            width: 100%;
            position: fixed;
        }
        .header {
            top: 0;
        }
        .footer {
            bottom: 0;
        }
        .content {
            background: #cccccc;
            position: absolute;
            top: 30px;
            bottom: 30px;
            left: 0;
            right: 0;
            overflow: scroll;
        }