常用的布局方式

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