关于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