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> CSS: #header{width:100%; height:auto;} |
部局:主要是为了控制内容DIV的高度一致
顶部 |
||
内容左列
|
内容右列
|
导航列
|
底部 |
如果山不向我走来,我就向山走去!
![](http://www.cnblogs.com/Emoticons/baimantou/202015214.gif)