css+div自动适应高度，在IE和firefox下都能适应

jrosion 2009-05-26 03:39:20

网上找了些css+div自动适应高度的代码，用起来总是不对，这里求大侠们一段css+div自动适应高度的代码
有两个问题：
第一：div根据内容自动调整div的高度
第二：左右结构的div，无论当左边的div还是右边的div高度增大时，高度小的div能自动调整高度，并且下方的div也自动往下移动位置

希望大侠们不吝赐教，困惑好长时间了，希望在这里能够得到解决。

...全文

5267 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

sqq 2012-06-17

打赏
举报

好的,解决了

jaksuse 2010-10-18

打赏
举报

学习。。

tykingco2 2010-04-30

打赏
举报

6楼的解决了问题谢谢!

javaxi 2009-07-16

打赏
举报

mark，学习

一国之军 2009-07-16

打赏
举报

学习哈~

sofe413313749 2009-05-29

打赏
举报

学习哈~
同时鄙视商业性质的广告 ~ ~!

tobeno2 2009-05-27

打赏
举报

用javascript，类似：
document.getElementById("firstindex_left").style.height = document.getElementById("pmain").offsetHeight + "px";

yoyoyuye 2009-05-27

打赏
举报





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

  <META NAME="Generator" CONTENT="EditPlus">

  <META NAME="Author" CONTENT="">

  <META NAME="Keywords" CONTENT="">

  <META NAME="Description" CONTENT="">

 </HEAD>

<style>

.container{

					display:table;

					width:600px;

					background:#ff6600;

					margin:0px;

					padding-top:0;

					padding-right:0;

					padding-bottom:0;

					padding-left:0;

					}

.leftbox{

				width:300px;

				background:#f00;

				float:left;

			

				height:100%;

				

				}

.rightbox{

					width:300px;

					height:100%;

					background:#c90;

					float:right;

					}

</style>

 <BODY>

  <div class="container">

		<div class="leftbox">

			就何必何必何必何必何必何必何必何必何必何必

		</div>



		<div class="rightbox">

			必何必何必何必何必何必何必何必何必何必何必何必何必必何必何必何必何必何必何必何必何必何必何必何必何必何必何必何必必何必何必何

	</div>

 </BODY>

</HTML>

夜雨_Jason 2009-05-27

打赏
举报

三列自适应高度
可以根据自己需要修改
兼容IE6 IE7 IE8 FireFox Chrome Opera Safari Netscape



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

<title>无标题文档</title>

<style type="text/css">

<!--

.main{

      width:600px;

	  overflow:hidden;

	  }

.left{

      background:#999999;

	  margin-bottom:-10000px;

	  padding-bottom:10000px;

	  width:200px;

	  float:left;

	  color:#FF0000;	  

	  }

.center{

      background:#333333;

	  margin-bottom:-10000px;

	  padding-bottom:10000px;

	  width:200px;

	  float:left;

	  color:#FF0000;

	  }

.right{

      background:#0000FF;

	  margin-bottom:-10000px;

	  padding-bottom:10000px;

	  width:200px;

	  float:left;

	  }

.bottom{

      width:600px;

	  background:#CC00CC;

	  color:#000000;

	  height:100px;

	  }

-->

</style>

</head>



<body>

<div class="main">

   <div class="left">left</div>

   <div class="center">center<br />center<br />center<br />center<br />center<br />center<br />center<br /></div>

   <div class="right">right</div>

</div>

<div class="bottom">bottom</div>

</body>

</html>

mike_24 2009-05-26

打赏
举报

学习

bing475879749 2009-05-26

打赏
举报



<style type="text/css">

#leftbox{float:left;width:200px; background-color:#FF0000;}

#midbox{float:left;width:200px;background-color:#FFFF00}

.bottom{display:block;clear:both;margin-top:50px;background:#000000;width:300px;height:200px;color:#FFF;}

</style>

<div id="leftbox">22</div>

<div id="midbox">左边的内容左边的内容左边的内容左边的内容左边的内容左边的内容左边的内容</div>

<script>

if(midbox.offsetHeight>leftbox.offsetHeight)

leftbox.style.height=midbox.offsetHeight+"px";

else

midbox.style.height=leftbox.offsetHeight+"px";

</script>

<div class="bottom">sssssssssssss</div>

继欢是黑蛋舅舅 2009-05-26

打赏
举报

这是以前帮别人修改的一个，你可以参考一下
<!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>
<title>New Document </title>
<style type="text/css">
body{
margin:15px;
font-family:Arial; font-size:12px;
}
.father{
background-color:#ffff99;
border:1px solid #111111;
padding:5px;
float:left;
width:100%;
}
.father div{
padding:10px;
margin:0px 15px;
border:1px dashed #111111;
background-color:#90baff;
display:inline;
}
.son1{
float:left;
}
.son2{
float:left;
}
.son3{
float:right;
}
</style>
</head>
<body>
<div class="father">
<div class="son1">
Box-1</div>
<div class="son2">
Box-2</div>
<div class="son3">
Box-3</div>
</div>
</body>
</html>