CSS高度自適應(yīng)代碼(用了都說好)_層和布局特效

CSS高度自適應(yīng)代碼，用了都說好，左邊高度隨右邊內(nèi)容的擴(kuò)充自動(dòng)變高適應(yīng)。不過有些麻煩，還用了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>
增加而自動(dòng)填充適應(yīng)，<br>
不信你就試試��！
</div>
  </div>
  <div id="otright">
    <div id="txt">
這只是一段測試文字，你可以復(fù)制這段文字然后粘貼到文本框內(nèi)重新運(yùn)行一下，看看效果，左側(cè)會自動(dòng)適應(yīng)右側(cè)文字的增加，也就是高度自適應(yīng)。<br><br>
你是否能記住“模板無憂呢？”<br>
模板無憂（mb5u.com）提供各類網(wǎng)頁模板、視頻教程、JavaScript/CSS特效代碼以及常用軟件下載等，做有質(zhì)量的學(xué)習(xí)型源碼下載站。
	</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>

所屬頻道：層和布局特效/更新時(shí)間：2012-12-23

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)層和布局特效：

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁鏈接| 搜索CSS高度自適應(yīng)代碼(用了都說好)
特效說明：
層和布局模板-CSS高度自適應(yīng)代碼(用了都說好)。

日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

CSS高度自適應(yīng)代碼(用了都說好)_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些