您现在的位置：网页制作教程网 >> 网页设计 >> 网页布局排版 >> 文章正文

网页中三列自适应高度布局的实现

作者:龙犊整理

来源:天极

热度:

2006-10-23 13:15:03

　　对IE5.x,应该用个hacks

以下是引用片段：
　　body {
　　min-width: 630px; /* 2x (LC fullwidth +
　　CC padding) + RC fullwidth */
　　}
　　#container {
　　padding-left: 200px; /* LC fullwidth */
　　padding-right: 190px; /* RC fullwidth + CC padding */
　　}
　　#container .column {
　　position: relative;
　　float: left;
　　}
　　#center {
　　padding: 10px 20px; /* CC padding */
　　width: 100%;
　　}
　　#left {
　　width: 180px; /* LC width */
　　padding: 0 10px; /* LC padding */
　　right: 240px; /* LC fullwidth + CC padding */
　　margin-left: -100%;
　　}
　　#right {
　　width: 130px; /* RC width */
　　padding: 0 10px; /* RC padding */
　　margin-right: -190px; /* RC fullwidth + CC padding */
　　}
　　#footer {
　　clear: both;
　　}
　　/*** IE Fix ***/
　　* html #left {
　　left: 150px; /* RC fullwidth */
　　}

高度自适应

以下是引用片段：
　　#container {
　　overflow: hidden;
　　}
　　#container .column {
　　padding-bottom: 20010px; /* X + padding-bottom */
　　margin-bottom: -20000px; /* X */
　　}
　　#footer {
　　position: relative;
　　}

　　这个代码起源于adapted wholesale。

　　遗憾的是现在Opera还不支持#container的overflow，期待版本9。

　　现在IE还不能真正的自适应高度，还要加下面的代码，如果你需要#footer，可再加个DIV(#footer外面)。

上一页 [1] [2] [3] [4] [5] [6] 下一页

我来说两句：

查看评论