标签：style blog http color ar 2014 div 代码
想布一个这样的局
1.中间那栏在<500px的时候没有滚动条，一旦内容超出出现滚动条;
2.若右边div高度被内容撑大，左边跟着变高。撑大到足够高的时候滚动条没掉;
3.中间那栏有个border-right,不能因为左边太短或者右边太长之类的出现断层
思路一
按一般的布局方式，写了一个这样的
css
* { padding: 0; margin: 0; } .div1 { height: 500px; width: 200px; background: red; float: left; } .div2 { width: 300px; background: yellow; float: left; /*margin-left: 200px;*/ } .div3 { margin-left: 500px; background: blue; } .div22 { min-height: 500px; } .div33 { height: 300px; }
body
<div>
<div class="div1"></div>
<div class="div2">
<div class="div22"></div>
</div>
<div class="div3">
<div class="div33"></div>
</div>
</div>
但是无论怎么调中间和右边的内容高度，中间都不会出现滚动条。
原因是：中间那栏float了，没法跟着父元素的大小自适应
解决：给父元素clearfix
另外，利用负外边距的特性。代码为下
* { padding: 0; margin: 0; } .div1 { height: 500px; width: 200px; background: red; float: left; } .div2 { width: 300px; /*background: yellow;*/ float: left; /*这两行能保证中间高度最低为500（意味着border最低也有500px高度），但border会随着包裹的内容增高而增高*/ min-height: 5000px; margin-bottom: -4500px; /*要是没有这个，页面就会有5000px的高度*/ overflow: auto; border-right: 2px solid black; } .div3 { margin-left: 502px; background: blue; } .div22 { height: 500px; background: green; } .div33 { height: 900px; } .clearfix:after { content : "."; height : 1px; display : block; visibility : hidden; clear : both; }
<div class="clearfix"> <div class="div1"></div> <div class="div2"> <div class="div22"></div> </div> <div class="div3"> <div class="div33"></div> </div> </div>
更改div2的margin-bottom可以保证border的最短高度（当然，如果短于屏幕高度的话它会延伸至整个屏幕高度，这点不太好）;
更改div22的height可以试验页面是否会撑大，border是否跟着变大（完了居然不能）;
更改div33的height可以试验页面是否会撑大，border是否跟着变大(这个可以);
感觉这种效果不是很好。而且左边没有滚动条
思路2 中间栏利用绝对定位
布局实践 overflow 自适应高度,布布扣,bubuko.com
标签：style blog http color ar 2014 div 代码
原文地址：http://www.cnblogs.com/cjy1993/p/3915209.html
