div+css实现几种经典布局的详解

一、左右两侧，左侧固定宽度200px，右侧自适应占满

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

        .divBox{
            height: 500px;
        }
        .left{
            float: left;
             200px;
            height: 100%;
        }
        .right{
            margin-left: 200px;
            height: 100%;
        }

这个实现起来比较的简单,左侧的div给浮动，右侧的divmargin-left使其从左侧div右侧开始展现,加背景颜色方便观察。

二、左中右三列，左右个200px固定，中间自适应占满

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

 .divBox{
    height: 500px;
}
.left{
    float: left;
     200px;
    height: 100%;
}
.center{
    margin: 0 200px;
    height: 500px;
}
.right{
    float: right;
     200px;
    height: 100%;
}

三、上中下三行，头部200px高，底部200px高，中间自适应占满

<div class="divBox">
    <div class="top"></div>
    <div class="center"></div>
    <div class="bottom"></div>
</div>

        .divBox{
             100%;
        }
        .top{
             100%;
            height: 200px;
            position: absolute;
            top: 0;
        }
        .center{
             100%;
            position: absolute;
            top: 200px;
            bottom: 200px;
        }
        .bottom{
             100%;
            height: 200px;
            position: absolute;
            bottom: 0;
        }

这里用到了绝对定位，把上面的和下面的分别设置top:0,bottom:0 固定在上下两端，中间的距离上下200px即可。

四、上下两部分，底下这个固定高度200px，如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer挤着往下走

    <div class="divBox">
        <div class="content"></div>
        <div class="footer"></div>
    </div>

        html{
            height: 100%;
        }
        body{
            min-height: 100%;
            position: relative;
        }
        .content{
             100%;
            padding-bottom: 200px;
        }
        .footer{
             100%;
            height: 200px;
            position: absolute;
            bottom: 0;
        }

固定footer在底部和把foorter往下挤着走都比较容易实现，但是合到一起，就不好弄了吧，其实也不难，更改content的高度，就可以看到效果了

必要的设置就是html要有高度,body的最小高度要有，footer是依照body进行绝对定位的，

了解了这些就不难实现了。

这些只是实现经典布局的一些方法，还有其他的方法，这里就不一一列出了。