div左右布局页面兼容ie6 ie7问题

joygarden 2010-12-27 04:22:13



<!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>

页面左右布局宽度左边固定右边自适应，左右高度自自适应
目前在firefox和ie8兼容但不兼容ie6,ie7要怎么改

...全文

613 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

86y 2011-01-07

打赏
举报

左右反了？？我你把内容换过来不就行了。！你窗口变化不自应？我FF也可以！

86y 2010-12-30

打赏
举报



<!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>

86y 2010-12-30

打赏
举报

你是想怎么实现同高呢。。有什么背景还是什么可以看出来！

sunshineqt 2010-12-30

打赏
举报

我会，嘻嘻

joygarden 2010-12-30

打赏
举报

[Quote=引用 5 楼 charrys 的回复:]

HTML code

<!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-equ……
[/Quote]
刚试了下不行啊
1.左右反了
2.ie8窗口变化时反复调用findDimensions 左右无限增长造成假死
3.firefox窗口变化时高度不能自适应