关于div自适应高度/左右高度自适应一致的js代码

153 阅读 0 评论 101 点赞

我是靠谱客的博主伶俐航空，最近开发中收集的这篇文章主要介绍关于div自适应高度/左右高度自适应一致的js代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在使用DIV和CSS进行网页布局中，DIV的自适应高度和自适应宽度是一个很常见的问题。
为了保证页面的整体美观性，需要将两个或者多个层的高度/宽度保持一致。

左右自适应高度一致 Jquery

复制代码代码如下:

 
<div style="width:300px;"> 
<div id="Left" style="float:left;background-color:blue;">1<br/>3<br/>5<br/></div> 
<div id="Right" style="float:right;background-color:red;">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> 