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

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

1. <div class="divBox">
2. <div class="left"></div>
3. <div class="right"></div>
4. </div>

1. .divBox{
2. height: 500px;
3. }
4. .left{
5. float: left;
6. width: 200px;
7. height: 100%;
8. }
9. .right{
10. margin-left: 200px;
11. height: 100%;
12. }

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

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

1. <div class="divBox">
2. <div class="left"></div>
3. <div class="right"></div>
4. <div class="center"></div>
5. </div>

1. .divBox{
2. height: 500px;
3. }
4. .left{
5. float: left;
6. width: 200px;
7. height: 100%;
8. }
9. .center{
10. margin: 0 200px;
11. height: 500px;
12. }
13. .right{
14. float: right;
15. width: 200px;
16. height: 100%;
17. }

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

1. <div class="divBox">
2. <div class="top"></div>
3. <div class="center"></div>
4. <div class="bottom"></div>
5. </div>

1. .divBox{
2. width: 100%;
3. }
4. .top{
5. width: 100%;
6. height: 200px;
7. position: absolute;
8. top: 0;
9. }
10. .center{
11. width: 100%;
12. position: absolute;
13. top: 200px;
14. bottom: 200px;
15. }
16. .bottom{
17. width: 100%;
18. height: 200px;
19. position: absolute;
20. bottom: 0;
21. }

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

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

1. <div class="divBox">
2. <div class="content"></div>
3. <div class="footer"></div>
4. </div>

1. html{
2. height: 100%;
3. }
4. body{
5. min-height: 100%;
6. position: relative;
7. }
8. .content{
9. width: 100%;
10. padding-bottom: 200px;
11. }
12. .footer{
13. width: 100%;
14. height: 200px;
15. position: absolute;
16. bottom: 0;
17. }

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

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

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

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