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

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

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

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

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

下面论坛上别人的答案。

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

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

XML/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-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>

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

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

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

XML/HTML code?

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

posted on 2012-11-16 13:47 kenty 阅读(1651) 评论(0) 收藏举报