深山老林

2006-08-14[原]老调重弹-三栏布局

在之前的《[原]一个三栏布局(2)》中提到的不用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>
-----------------------------------------------------

其实是可以不用改的，就使用原来的那个HTML代码，也可以做到不加JS而自适应高度：

-----------------------------------------------------
<div id="top">top</div>
  <div id="main">
    <div id="midpart"><p>midpart</p></div>
    <div id="leftpart"><p>leftpart</p></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;
}
*{
 margin:0;
 padding:0;
}
#top,#bottom{
 width:100%;
 background-color:#0099FF;
 height:50px;
 margin:0 auto;
 clear:both;
}
#main{
 width:auto;
 padding:0;
 color: black;
 height:100%;
 overflow:hidden;
 position:relative;
 left:0;
}
#leftpart{
 width:200px;
 height:auto;
 background-color:#999900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
 position:absolute;
 left:0;
 top:0;
}
#midpart{
 width:auto;
 height:auto;
 margin:0 200px;
 background-color:#00CC99;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
#rightpart{
 width:200px;
 height:auto;
 background-color:#FF9900;
 padding-bottom: 32767px;
 margin-bottom: -32767px;
 position:absolute;
 right:0;
 top:0;
}
-----------------------------------------------------

具体就不做解释了，原理还是一样，只是换了种方式。

注：由于年青气盛，头脑一时发热，犯了“自以为”的错，这个布局是有缺陷的，左右两边因为使用了绝对定位，所以无法自适应高度。Sorry