關於div自適應高度/左右高度自適應一致的js代碼

在DIV和CSS進行網頁布局中，DIV的自適應高度和自適應寬度是一個很常見的問題，本文將介紹左右自適應高度一致的Jquery與DIV高度自適應屏幕的js。

 

在使用DIV和CSS進行網頁布局中，DIV的自適應高度和自適應寬度是一個很常見的問題。 
為了保證頁面的整體美觀性，需要將兩個或者多個層的高度/寬度保持一致。

左右自適應高度一致 Jquery

代碼如下:

<div style="width:300px;"> 
<div id="Left" style="float:left;">1<br/>3<br/>5<br/></div> 
<div id="Right" style="float:right;">2</div> 
</div> 
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script> 
<script type="text/javascript"> 
$(function(){ 
var heightLeft= $("#Left").height(); 
var heightRight= $("#Right").height(); 
if (heightLeft > heightRight) 
{ 
$("#Right").height(heightLeft); 
} 
else 
{ 
$("#Left").height(heightRight); 
} 
}) 
</script> 

DIV高度自適應屏幕 js 

代碼如下:

<div id="top" style="height="200px;"></div> 
<div id="box">dsafsafsafsafsafdsa</div> 
<script> 
window.onload=function (){ 
function auto_height() 
{ 
//var h= document.documentElement.clientHeight-200; 
//var high = document.getElementById("box"); 
//high.style.height=h+"px"; 
document.getElementById("box").style.height=document.documentElement.clientHeight-200+"px"; 
} 
auto_height(); 
onresize=auto_height; 
} 
</script> 

 

 

原文鏈接：http://www.jb51.net/article/34986.htm