CSS高度自适应代码(用了都说好)_层和布局特效

CSS高度自适应代码，用了都说好，左边高度随右边内容的扩充自动变高适应。不过有些麻烦，还用了JS，这样不太好。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<style type="text/css">
body {
	font-family: 宋体,Arial,serif;
	font-size: 12px;
	COLOR: #333333;
	margin:0 auto;
	padding:0;
	background: url(otbg.jpg) left top repeat-x;
	text-align:center;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border:0; }
li{list-style-type:none;}
*{margin:0;padding:0;font:12px "宋体"}
a {blr:expression(this.onFocus=this.blur())}
area {blr:expression(this.onFocus=this.blur())}
/*top*/
#topall{width:100%;height:328px;margin:0 auto;background: url(topco.jpg) left top repeat-x;}
#toplogo{width:785px;height:99px;text-align:left;}
#topmenu{width:785px;height:49px;background: #ffcc00;}
#topbar{width:785px;height:180px;}
/*left*/
#midall{width:785px;margin:0 auto;}
#otleft{float:left;width:191px;
background: #ff0000;border-left:solid 1px #CCCCCC;border-right:solid 1px #CCCCCC;}
#left{width:191px;height:92px;}
#left2{width:191px;min-height:100px;height:auto}
/*right*/
#otright{float:right;width:590px;text-align:center;}
#location{width:572px;height:20px;text-align:right;padding:10px 18px 0 0}
#line{width:557px;height:10px;background: url(otc2_06.jpg) no-repeat;}
#line2{width:557px;height:19px;background: url(otc2_12.jpg) no-repeat;}
#titlepic{width:557px;height:49px;}
#txt{width:520px;text-align:left;line-height:180%;padding-bottom:20px;}
/*foot*/
#footer{width:785px;margin:0 auto;clear:both;background: #F7EED9;}
#fline{border:solid 2px #AE6C36;}
#fline2{border:solid 1px #ffffff;}
#ftxt{text-align:center;line-height:180%;}
</style>
</head>
<body>
<div id="midall">
  <div id="otleft"><div id="left">
</div>
<div id="left2">
<a href="/" >模板无忧提醒：</a><br>
这里的高度会随着右边高度的<br>
增加而自动填充适应，<br>
不信你就试试！！
</div>
  </div>
  <div id="otright">
    <div id="txt">
这只是一段测试文字，你可以复制这段文字然后粘贴到文本框内重新运行一下，看看效果，左侧会自动适应右侧文字的增加，也就是高度自适应。<br><br>
你是否能记住“模板无忧呢？”<br>
模板无忧（mb5u.com）提供各类网页模板、视频教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。
	</div>
  </div>
<div style="clear:both"></div>
</div>
<div id="footer">
  <div id="fline">
  </div>
  <div id="fline2">
  </div>
  <div id="ftxt"><a href="/" >返回mb5u.com首页</a></div>
</div>
<script language="javascript">
var o1 = document.getElementById("otleft");
var o2 = document.getElementById("otright");
var h1 = o1.offsetHeight;
var h2 = o2.offsetHeight;
if(h1>h2)
o2.style.height = h1
else
o1.style.height = h2
</script>
</body>
</html>

所属频道：层和布局特效/更新时间：2012-12-23

[收藏][报错][返回列表]

CSS高度自适应代码(用了都说好)_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些