两列(或者说N列)等高的写法

前段时间,有朋友问我怎么做.我没想出来.刚开始用内补丁+外补丁的方法,可是.border却被overflow了..今天说的有两种方面:第一种是JS.第二种是图片背景:
第一种:JS方法

<!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">
* { padding:0; margin:0; list-style:none; }

html { height:100%; }

body { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#555; height:100%; line-height:26px; }

#wrap { width:960px; margin:0 auto; padding-top:50px; overflow:hidden; padding-bottom:20px; }

#main { float:right; width:630px; border:1px solid #d5d5d5; padding:10px; }

#sideBar { width:180px; margin-left:10px; display:inline; padding:10px; float:left; display:inline; border:1px solid #d5d5d5; background-color:#f7f7f7; }

#sideBar0 { width:70px; float:left; border:1px solid #d5d5d5; padding:20px 10px 10px 10px; }
</style>
</head>
<body>
<div id="wrap">
  <div id="sideBar0"></div>
  <div id="sideBar"></div>
  <div id="main"></div>
</div>
<script type="text/javascript">
var Class={
	x:function(r,m){
		for(var i=0;i<r;i++)
		{var c=document.createElement("div");
		  c.innerHTML=i;
		  document.getElementById(m).appendChild(c); }
		  },
   y:function(){ var m=0,n=0,ar=0;
   if(arguments.length<2){alert("你没弟弟!");return false;}
   else{
	   for(var j=0;j<arguments.length;j++){
		 n=Math.max(parseInt(this.z(document.getElementById(arguments[j]),"paddingTop")),n);
		 ar=Math.max(parseInt(this.z(document.getElementById(arguments[j]),"paddingBottom")),ar);
    	 m=Math.max(parseInt(document.getElementById(arguments[j]).offsetHeight),m);
		 document.getElementById(arguments[j]).style.height=m-n-ar+"px";
   }
	}},
   z: function(o, a){  
        return o.style[a] ? o.style[a] : window.getComputedStyle ? window.getComputedStyle(o, null)[a] : o.currentStyle[a];  
            }  };
Class.x(100,"main");//填充一些数据,以便演示.
Class.y("main","sideBar","sideBar0");//可以添加</script>
</body>
</html>

第二种:CSS加背景图片

html { height:100%; }

body { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#555; height:100%; line-height:26px; }

#wrap { width:960px; margin:0px auto; padding-bottom:20px; padding-top:20px; }

/*<!--*/
.box, .box_top, .box_bottom { background:url(http://www.14pc.com/14pc_images/2div.gif) no-repeat; overflow:hidden; width:100%; }

.box { background-repeat:repeat-y; }

.box_top { background-position: -980px 0; height:5px; }

.box_bottom { background-position: -1990px 0; height:5px; }

/*-->*/
#main { float:right; width:630px; padding:10px; }

#sideBar { float:left; width:280px; padding:10px; }
</style>
</head>
<body>
<div id="wrap">
  <div class="box_top"></div>
  <div class="box">
    <p id="sideBar"></p>
    <p id="main">fasdfdfasd<br />
      fasdfdfasd<br />
      fasdfdfasd<br />
      fasdfdfasd<br />
      fasdfdfasd<br />
      fasdfdfasd<br />
      fasdfdfasd<br />
      fasdfdfasd<br />
    </p>
  </div>
  <div class="box_bottom"></div>
</div>
</body>
</html>

posted on 2009-09-17 13:24 stri 阅读(168) 评论(0) 收藏举报

刷新页面返回顶部

木小乐

两列(或者说N列)等高的写法

导航

公告