DIV+CSS问题 两个div 高度适应
发布网友
共5个回答
懂视网
很多人都会碰到如题的布局问题，解决方案很多，可以用背景图来填充，或用js来控制，但终不是最佳方案，最好还是从DIV,CSS本身来考虑:
以下为三行两列的的经典模式，还可以演变成多种布局，有待大家修改:
Code
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在左边
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
我在正文
配上效果图：
本方案在IE6，IE7，IE8，FF下均测试通过，虽然简单，但是用处广泛，希望对广大web标准爱好者有所帮助
热心网友
<!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 type="text/css">
body{margin:0px;padding:0px;color:black;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;line-height: 140%;}
div{margin:0px;padding:0px;border:0px;}
#main{width:780px;margin:0 auto;overflow:hidden;background:#CCC;}
#left{width:400px;float:left;background:#FF9966;border:1px solid #f00;}
#right{width:350px;float:right;background:#6699CC;border:1px solid #f00;}
</style>
</head>
<body>
<div id="main">
<div id="left">left<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br />用力撑开左边DIV<br /></div>
<div id="right">right<br />右边DIV的高度也被撑高了吧~</div>
</div>
<script type="text/javascript">
document.getElementById("right").style.height=document.getElementById("main").scrollHeight+"px";
document.getElementById("left").style.height=document.getElementById("main").scrollHeight-2+"px";
</script>
<br />11 </p>
</body>
</html>
热心网友
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>等高布局</title>
<style type="text/css">
*{margin:0;padding:0;}
#a{width:800px;height:auto;overflow:hidden;margin:0 auto;}
#b,#c{margin-bottom:-1000px;padding-bottom:1000px;}
#b{float:left;width:350px;background:red;}
#c{float:right;width:450px;background:blue;}
</style>
</head>
<body>
<div id="a">
<div id="b">
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
<p>bbbb</p>
</div>
<div id="c">
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
<p>cccc</p>
</div>
</div>
</body>
</html>
热心网友
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>华文盛世教育发展有限公司</title>
<style type="text/css">
#az{position:relative; width:200px; border:solid 1px #000;padding:10px;}
#b{ position:absolute; height:100%;width:90px; border:solid 1px #000; fload:left;margin-bottom:10px;}
#c{float:right;width:90px;border:solid 1px #000;}
</style>
</head>
<body>
<div id="az">
<div id="b">
</div>
<div id="c"><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<br style="clear:both" />
</div>
</body>
</html>
我只能弄成这样了！
热心网友
A B C不指定高度就会自动适应
