js控制三列高度自适应DIV+CSS页面

 

刚才发现的好东西，大众化的三列布局js，备用

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html lang = " en "  xml:lang = " en "  xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title > 脚本控制三行三列自适应高度DIV布局 </ title >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< script type = " text/javascript " >
function  P7_colH(){ 
  var  i,oh,hh,h = 0 ,dA = document.p7eqc,an = document.p7eqa;
  if (dA && dA.length){
  for (i = 0 ;i < dA.length;i ++ ){
 dA[i].style.height = ' auto ' ;
 }
for (i = 0 ;i < dA.length;i ++ ){
 oh = dA[i].offsetHeight;h = (oh > h) ? oh:h;
}
for (i = 0 ;i < dA.length;i ++ ){
  if (an){
 dA[i].style.height = h + ' px ' ;
 } else {
 P7_eqA(dA[i].id,dA[i].offsetHeight,h);
 }
}
if (an){
  for (i = 0 ;i < dA.length;i ++ ){
 hh = dA[i].offsetHeight;
  if (hh > h){
 dA[i].style.height = (h - (hh - h)) + ' px ' ;
 }
 }
} else {
 document.p7eqa = 1 ;
}
 document.p7eqth = document.body.offsetHeight;
 document.p7eqtw = document.body.offsetWidth;
 }
}
function  P7_eqT(){  // v1.5 by PVII-www.projectseven.com
  if (document.p7eqth != document.body.offsetHeight || document.p7eqtw != document.body.offsetWidth){
 P7_colH();
 }
}
function  P7_equalCols(){  // v1.5 by PVII-www.projectseven.com
  if (document.getElementById){
 document.p7eqc = new  Array;
  for (i = 0 ;i < arguments.length;i ++ ){
 document.p7eqc[i] = document.getElementById(arguments[i]);
 }
setInterval( " P7_eqT() " , 10 );
 }
}
function  P7_eqA(el,h,ht){  // v1.5 by PVII-www.projectseven.com
  var  sp = 10 ,inc = 10 ,nh = h,g = document.getElementById(el),oh = g.offsetHeight,ch = parseInt(g.style.height);
 ch = (ch) ? ch:h; var  ad = oh - ch,adT = ht - ad;nh += inc;nh = (nh > adT) ? adT:nh;g.style.height = nh + ' px ' ;
 oh = g.offsetHeight; if (oh > ht){nh = (ht - (oh - ht));g.style.height = nh + ' px ' ;}
  if (nh < adT){
 setTimeout( " P7_eqA(' " + el + " ', " + nh + " , " + ht + " ) " ,sp);
 }
}
</ script >
< style type = " text/css " >
body {
PADDING - RIGHT: 0px; PADDING - LEFT: 0px; FONT - SIZE:  75 % ; PADDING - BOTTOM: 0px; MARGIN: 5px; LINE - HEIGHT:  100 % ; PADDING - TOP: 0px; FONT - FAMILY: Verdana, Geneva, Arial, Helvetica, sans - serif
}
#header {
PADDING - RIGHT: 0px; PADDING - LEFT: 0px; PADDING - BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING - TOP: 0px
}
#mid {
PADDING - RIGHT: 0px; PADDING - LEFT: 0px; PADDING - BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING - TOP: 0px
}
#footer {
PADDING - RIGHT: 0px; PADDING - LEFT: 0px; PADDING - BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING - TOP: 0px
}
#header {
BACKGROUND: #f4f4f4; MARGIN - BOTTOM: 5px; HEIGHT: 60px
}
h3 {
MARGIN: 0px; COLOR: # 708090 ; PADDING - TOP: 25px; TEXT - ALIGN: center
}
h5 {
MARGIN: 0px; COLOR: # 708090 ; PADDING - TOP: 25px; TEXT - ALIGN: center
}
#fbox {
BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px
}
#mbox {
PADDING - RIGHT: 0px; PADDING - LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING - BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING - TOP: 0px
}
#sbox {
BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px
}
p {
PADDING - RIGHT: 10px; PADDING - LEFT: 10px; PADDING - BOTTOM: 10px; MARGIN: 0px; TEXT - INDENT: 2em; LINE - HEIGHT:  130 % ; PADDING - TOP: 10px
}
#footer {
CLEAR: both; BORDER - TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT - ALIGN: center
}
</ style >
< meta content = " MSHTML 6.00.2800.1515 "  name = " GENERATOR "   />
</ head >
< body onload = " P7_equalCols('fbox','mbox','sbox') " >
< div id = " header " >
  < h3 > 脚本控制三行三列自适应高度DIV布局 </ h3 >
</ div >
< div id = " mid " >
  < div id = " fbox " >
  < p > 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍  -  
 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </ p >
  < p > 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍  -  
 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </ p >
  </ div >
  < div id = " mbox " >
  < p > 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍  -  
 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </ p >
  < p > 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 
 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。  </ p >
  < p > 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍  -  
 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </ p >
  < p > 如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer 
 改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。  </ p >
  </ div >
  < div id = " sbox " >
  < p > 亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍  -  
 你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。  </ p >
  </ div >
</ div >
< div id = " footer " >
  < h5 > 仅供演示 </ h5 >
</ div >
</ body >
</ html >