门户网站三列布局（很有用的方法）

来源：互联网发布：如何域名指向端口编辑：程序博客网时间：2024/05/16 12:54

以前一直苦于侧栏的高度要随主要区域的高度变化而变化，放上很多无用的标签，很是难受。今天看到这样的解决方法，真是喜出望外呀。还可以这样的：

很关键的样式：

#container .column {/*此为关键点*/
padding-bottom: 3000px;

margin-bottom: -3000px;

}

<!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>test-3</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body {/*定义body宽并横向居中*/width:960px;margin:0 auto;}#header {background: #A9A9A9;height: 70px;}#container {margin-top: 10px;overflow: hidden;/*隐藏子栏目的padding-bottom*/zoom:1;/*IE6下激发haslayout*/}#container #mainContain {/*框起左边栏及主体部分，使得可通过样式实现与右边栏的分离*/float: left;width: 680px;}#container #mainContain #leftBar {/*定义左边栏*/float: left;width: 270px;background: #424242;}#container #mainContain #mainBox {/*定义主体内容*/float: right;width: 400px;background: #A9A9A9;}#container #rightBar {/*定义右边栏*/float: right;width: 270px;background: #797979;}#container .column {/*此为关键点*/padding-bottom: 3000px;/*设置一个足够的下边填充，使得高度相对较矮的box可在视觉上延伸其高度*/margin-bottom: -3000px;/*设置一个与其设置的下边填充数额相等的反向下边边距，使得其在布局上维持相对合理状态*/}</style></head> <body><div id="header"></div> <div id="container"> <div id="mainContain"> <div id="mainBox" class="column"> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> <p>文字</p> </div> <div id="leftBar" class="column"></div> </div> <div id="rightBar" class="column"></div></div></body></html>

文章转载：http://www.osmn00.com/?p=429