div左右布局页面 兼容ie6 ie7问题
本帖最后由 joygarden 于 2010-12-27 16:57:29 编辑
<!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=utf-8" />
<style type="text/css">
#main{
overflow: hidden;
}
#left{
float:left;
width:252px;
text-align:center;
border:1px solid #000;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
#right{
margin-left:252px;
text-align:center;
border:1px solid #f00;
padding-bottom: 10000px;
margin-bottom: -10000px;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="main">
<div id="left">
固定252px<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10<br/>
</div>
<div id="right">
按浏览器自适应<br/>1<br/>2<br/>3<br/>4<br/>5<br/>
</div>
</div>
</body>
</html>
<!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>无标题文档</title>
<style>
*{margin:0;padding:0;}
.clearfix:after
{ content:"."; display:block;height:0;clear:both; visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
.left{width:252px;float:left;display:inline;background:blue;}
.r_content{padding-right:252px;}
.right{float:left;display:inline;margin-right:-504px;padding-right:252px;width:100%;background:#ff0000;}
</style>
</head>
<body>
<div class="clearfix" id="main">
<div class="right" id="right">
<div class="r_content">某某劳而某某劳而无功 云蒸霞蔚云蒸霞某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸某劳而无功 云蒸霞蔚云蒸霞蔚塔顶栽植打法顶栽植顶栽植顶栽植塔霞蔚塔顶栽植打法塔霞蔚塔顶栽植打法塔蔚塔顶栽植打法塔城落地有声bbbbbbb声bbbbbb声bbbbbbbbb
</div>
</div>
<div class="left" id="left">a</div>
</div>
<script>
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
var main=document.getElementById("main").scrollHeight;
document.getElementById("left").style.height=main+"px";
document.getElementById("right").style.height=main+"px";
}
findDimensions();
//window.setInterval("", 100);
//调用函数，获取数值
window.onresize=findDimensions;
</script>
</body>
</html>
