css+div自动适应高度，在IE和firefox下都能适应 (左右DIV自适应高度)

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

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

我用了下面这种方法，很容易解决。

<style type="text/css">

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

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

.bottom{display:block;clear:both;margin-top:50px;background:#000000;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>

下面论坛上别人的答案。

---------------------------

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

XML/HTML code?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

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

600px;

overflow:hidden;

}

.left{

background:#999999;

margin-bottom:-10000px;

padding-bottom:10000px;

200px;

float:left;

color:#FF0000;

}

.center{

background:#333333;

margin-bottom:-10000px;

padding-bottom:10000px;

200px;

float:left;

color:#FF0000;

}

.right{

background:#0000FF;

margin-bottom:-10000px;

padding-bottom:10000px;

200px;

float:left;

}

.bottom{

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>

---------------------------------------

用javascript，类似：
document.getElementById("firstindex_left").style.height = document.getElementById("pmain").offsetHeight + "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>
    <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;
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>

---------------------------------------

XML/HTML code?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

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

600px;

background:#ff6600;

margin:0px;

padding-top:0;

padding-right:0;

padding-bottom:0;

padding-left:0;

}

.leftbox{

300px;

background:#f00;

float:left;

height:100%;

}

.rightbox{

300px;

height:100%;

background:#c90;

float:right;

}

</style>

<BODY>

<div class="container">

<div class="leftbox">

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

</div>

<div class="rightbox">

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

</div>

</BODY>

</HTML>

相关阅读:
用例输入单元测试(3)参数化测试方法
线程文件[MFC]线程优先级设置,下拉列表框ComboBox,复选框CButton,列表框CListBox的使用
设置系统SetLocalTime设置系统时间
页面错误毕业设计之错误集锦(六)
定义数据类型SQL server中SET ANSI_PADDING对char、varchar、nvarchar的影响
查找关键字算法：静态查找表（Static Search Table)
密码注册ASP.NET实现忘记密码
卡函数or1200基于simplespi的SD卡驱动
目的地返回POJ 2336 动态规划(DP) Ferry Loading II
坐标序列hdu 1003 解题报告 Max Sum

原文地址：https://www.cnblogs.com/kentyshang/p/2773135.html