深山老林

版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://forest.blogbus.com/logs/2164609.html

在《一个三栏布局(1)》中讲到了一个三栏布局，里面使用了JS脚本的方法来达到栏目自适应高度，缺点很明显，当浏览器禁用脚本的时候，布局就会变得混乱，特别是当左边栏或右边栏的高度小于中间栏的时候。下面来看一种不使用脚本的方法，还是按原来的要求，不过得对HTML代码做一下修改：

-----------------------------------------------------
<div id="top">top</div>
  <div id="main">
    <div id="nojs">
      <div id="midpart"><p>midpart</p></div>
      <div id="leftpart"><p>leftpart</p></div>
    </div>
    <div id="rightpart"><p>rightpart</p></div>
  </div>
<div id="bottom">bottom</div>
-----------------------------------------------------

这里是将中间栏跟左边栏放到了一个层里，这样总的结构就变成了是二栏了，然后再中左边里分出二栏。这样就可以不使用绝对定位了，也能使用负边界来解决栏目的高度自适应问题。来看下CSS样式部分：

-----------------------------------------------------
body,html{
 font-family:Arial;
 font-size:12px;
 background-color:#FFFFFF;
 text-align: center;
}
*{
 margin:0;
 padding:0;
}
#top,#bottom{
 width:770px;
 background-color:#0099FF;
 height:50px;
 margin:0 auto;
 clear:both;
}
#main{
 width:770px;
 margin-right: auto;
 margin-left: auto;
 padding: 0px;
 color: black;
 height:auto;
 overflow:hidden;
}
#nojs{
 width:570px;
 height:100%;
 float:left;
}
#leftpart{
 width:200px;
 height:auto;
 float:left;
 background-color:#999900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#midpart{
 width:370px;
 height:auto;
 background-color:#00CC99;
 margin-right: auto;
 margin-left: auto;
 float:right;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#rightpart{
 width:200px;
 height:auto;
 float:right;
 background-color:#FF9900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
-----------------------------------------------------

使用负边界的方法来实现栏目的自适应高度，不过这里就不然需要JS脚本了。