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

最新推荐文章于 2024-05-03 11:08:18 发布

weixin_34122604

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量100

点赞数

文章标签： xhtml javascript ViewUI

原文链接：https://yq.aliyun.com/articles/394722

版权

网上找了些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 >

本文转自kenty博客园博客，原文链接http://www.cnblogs.com/kentyshang/archive/2012/11/16/2773135.html如需转载请自行联系原作者

kenty

weixin_34122604

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css+div自动适应高度，在IE和firefox下都能适应 (左右DIV自适应高度)

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

扫一扫