文章归档友情连接照片地图

js控制div高度一致

分类:前端技术  作者:rming  时间:2012-04-18

原理,比较不同div高度,计算出最高div的高度,设置其他div高度为最高高度即可

<script type="text/javascript">

/* <![CDATA[ */

function AdjustColumnsHeight()

{

// get a reference to the three DIVS that make up the columns

var mainCol = window.document.getElementById('MainColumn');

var leftCol = window.document.getElementById('MainLeft');

var rightCol = window.document.getElementById('MainRight');

// calculate the max height

var hMainCol = mainCol .offsetHeight;

var hLeftCol = leftCol.offsetHeight;

var hRightCol = rightCol.offsetHeight;

var maxHeight = Math.max( hMainCol , Math.max(hLeftCol, hRightCol));

// set the height of all 3 DIVS to the max height

mainCol.style.height = maxHeight + 'px';

leftCol.style.height = maxHeight + 'px';

rightCol.style.height = maxHeight + 'px';

// Show the footer

window.document.getElementById('footer').style.visibility = 'inherit';

}

window.onload = function() { AdjustColumnsHeight(); }

/* ]]> */

</script>

html:

 

三行三列

xhtml:

<div id="header">顶行</div>
<div id="warp">
<div id="MainColumn">
<div id="MainLeft">内容左边列</div>
<div id="MainRight">内容右边列</div>
<div></div>
</div>
<div id="Navigate">导航列</div>
<div></div>
</div>
<div id="footer">底部一行</div>

CSS:

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
# MainColumn { float:left; width:60%;}
# MainLeft{ float:left; width:48%;}
# MainRight { float:right; width:48%;}
# Navigate { float:right; width:40%;}
.clear{ clear:both;}
#footer{width:100%; height:auto;}



  1. 最近空间快到期,也想换个空间,请问博主这个wordpress的博客主机空间,包年多少,在国内速度如何、

提交评论