//获取右侧文章区域高度(前提是设置右侧高度自动) var height=document.getElementById("product_content").offsetHeight; var height1=document.getElementById("about_left").offsetHeight; //当右侧高度低于左侧高度时,设置右侧高度等于左侧高度。 if (height<height1){ document.getElementById("product_centent").style.height=document.getElementById("about_left").offsetHeight-60+"px"; }//动态设置左右两侧的背景高度,很适用的效果。 document.getElementById("main_right").style.height=document.getElementById("about_right").offsetHeight+50+"px"; document.getElementById("main_left").style.height=document.getElementById("about_right").offsetHeight+50+"px";以前到网上看见的。你试试吧
} --> </style> <script type="text/javascript"> function SameH(sidebar,right) { var a=document.getElementByIdx(sidebar); var b=document.getElementByIdx(right);
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三栏等高(wwww.hemin.cn)</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:18px; font-family:"新宋体";}
body {min-width: 850px;height:100%;width:expression((documentElement.clientWidth < 850) ? "850px" : "auto" ); }
.Top{background:#999; height:100px;}
.Middle,.Left,.Right{ float:left;padding-bottom: 32767px;margin-bottom:-32767px;}
.Content{ overflow:hidden;padding:0 250px 0 300px; zoom:1;position:relative; height:100%;}
.Middle{background:#090;width:100%;}
.Left{background:#333;width:300px;margin-left:-100%; position:relative; right:300px;_left:250px;}
.Right{background:#666;width:250px;margin-right:-100%;}
</style>
</head>
<body>
<div class="Top">顶部</div>
<div class="Content">
<div class="Middle">中间</div>
<div class="Left">左边</div>
<div class="Right">右边<br /><br /><br /></div>
</div>
</body>
</html>
var height=document.getElementById("product_content").offsetHeight;
var height1=document.getElementById("about_left").offsetHeight;
//当右侧高度低于左侧高度时,设置右侧高度等于左侧高度。
if (height<height1){
document.getElementById("product_centent").style.height=document.getElementById("about_left").offsetHeight-60+"px";
}//动态设置左右两侧的背景高度,很适用的效果。
document.getElementById("main_right").style.height=document.getElementById("about_right").offsetHeight+50+"px";
document.getElementById("main_left").style.height=document.getElementById("about_right").offsetHeight+50+"px";以前到网上看见的。你试试吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>同一容器里两个div一样高</title>
<style>
<!--
*{
margin:0;
padding:0;
}
body{
font-family:Arial,helvetica,sans-serif,"宋体";
font-size:12px;
margin:0 auto;
text-align:center;
}
#container{
margin:0px auto;
width:900px;
overflow: hidden;zoom:1
}
#sidebar{
width:200px;
float:left;
background:#CCCC99;
}
#right{
float:right;
width:700px;
background:#99CCFF;
}
#right .content{
width:700px;
background:#99CCFF;
}
#right .message{
background:#123456;
margin-top:10px;
background-color:#FF6600;
}
-->
</style>
<script type="text/javascript">
function SameH(sidebar,right)
{
var a=document.getElementByIdx(sidebar);
var b=document.getElementByIdx(right);
if (a.scrollHeight < b.scrollHeight)
{
a.style.height= b.scrollHeight+"px";
}
else
{
b.style.height= a.scrollHeight+"px";
}
}
</script>
</head>
<body>
<div id="container">
<div id="sidebar">
sidebar
</div>
<div id="right">
<div class="content">内容<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />“估计东软的医疗板块业务收入今后3年累积增长率将达到30%。”国内IT服务提供商东软集团股份有限公司(600718.SH,下称“东软”)首席运营官兼高级副总裁卢朝霞昨日对CBN记者表示,由于国家政府部门明确规定,此次医改方案实施将优先采用国内产品,这对国内医疗设备厂家和国内IT厂家来说,是一个非常大的利好消息。
</div>
<div class="message">留言板</div>
</div>
</div>
<script type="text/javascript">SameH("sidebar","right");</script>
</body>
</html>