完美的DIV三行三列自适应高度布局

我们一般拿出来讨论的自适应高度的DIV布局，都是指有背景区分的，不用区分的三列布局很容易。不过在实际应用中很少有网站这样用，大多都是不用背景区分的。不过在这里我们并不讨论这种布局的实用性到底如何，而只是讨论实现这种布局的一种较完美的解决方案而已。

所谓自适应高度，也就是不管某一列撑长而其它列的高度也跟跟相应地撑长，这个效果如果用TABLE的话是轻而易举的，而用DIV就没那么容易了。之前本民工也尝试了不少办法，比如用JS控制、padding-bottom一个很大的负值……但都觉得不够完美。后来在蓝色理想找到一个国外的站，感觉这是目前为止最完美的一种解决方案了，不用hack、不用JS、兼容性强……他们把这种布局称之为：完美的圣杯。

原理其实很容易，理解之后应该可以解决很多样的布局方案。见上图，.colmask、.colmin、.colleft，分别为三列背景的容器，最外层的.colmask设定overflow:hidden;，通过相对定位分成三列。而内容容器.col1、 .col2、 .col3都放在最内层的.colleft里面，通过相对定位定好位置，所以不管.col1、 .col2、 .col3哪一个伸长或缩短，外部的.colmask、.colmin、.colleft都会跟着伸长与缩短，也就实现了我们所要的效果。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< title > demo </ title >
< style type ="text/css" >
body { margin : 0 ; padding : 0 ; font-size : 12px ; }
.header { width : 100% ; height : 50px ; background : #EEE ; border-bottom : 1px solid #000 ; }
.colmask { position : relative ; clear : both ; width : 100% ; overflow : hidden ; }
.colright, .colmid, .colleft { float : left ; width : 100% ; position : relative ; }
.col1, .col2, .col3 { float : left ; position : relative ; overflow : hidden ; }
.threecol { background : #BBB ; }
.threecol .colmid { right : 20% ; background : #CCC ; }
.threecol .colleft { right : 60% ; background : #DDD ; }
.threecol .col1 { width : 58% ; left : 101% ; }
.threecol .col2 { width : 18% ; left : 23% ; }
.threecol .col3 { width : 18% ; left : 85% ; }
.footer { clear : both ; width : 100% ; height : 50px ; background : #EEE ; border-top : 1px solid #000 ; }
</ style >
</ head >
< body >
< div class ="header" > 这里是头部 </ div >
< div class ="colmask threecol" >
< div class ="colmid" >
< div class ="colleft" >
< div class ="col1" >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
< p > 这里是中间 </ p >
</ div >
< div class ="col2" > 这里是左栏 </ div >
< div class ="col3" >
< p > 这里是右栏 </ p >
< p > 这里是右栏 </ p >
< p > 这里是右栏 </ p >
< p > 这里是右栏 </ p >
</ div >
</ div >
</ div >
</ div >
< div class ="footer" > 这里是底部 </ div >
</ body >
</ html >

转载于:https://www.cnblogs.com/bennman/archive/2009/09/09/1563159.html