深山老林

2006-03-30[原]一个三栏布局(2)

在《一个三栏布局(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;
}
-----------------------------------------------------