JS控制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+CSS

 

三行三列

xhtml:

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

CSS:

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

 

 

部局:主要是为了控制内容DIV的高度一致

顶部
内容左列	内容右列	导航列
底部