css - 使用 DIV 元素的动态分栏 HTML 页面布局

Question

目前我正在使用表格布局来实现我想要的外观，但我一直在读到这并不是解决这个问题的真正“正确”方法。所以我很好奇正确的方法，以及如何实现它。我意识到这里有几个类似的问题，但我不能完全让它们为我工作。

这是我想做的。

+-----------------------------------------------+  <- body { width:100%; height:100%; }
| +-------------------------------------------+ |  <- #banner { width:100%; height:200px; }
| |  #banner, fixed height                    | |
| +---------+---------------------------------+ |  <- #col1 { width:20%; height:auto; float:left; }
| |  #col1  |  #col2                          | |     #col2 { width:80%; height:auto; float:right; }
| |         |                                 | |
| |         |                                 | |
| |         |                                 | |
| |         |                                 | |
| +---------+---------------------------------+ |  <- #quick { width:100%; height:auto??; float:left; clear:both; }
| |  #quick links, height defined by content  | | 
| +-------------------------------------------+ |
+-----------------------------------------------+

#banner包含一个图像，并具有固定的高度，但宽度会根据浏览器窗口的宽度进行调整。底部 div #quick也具有浏览器窗口的宽度，但其高度应由其内容定义(ul 元素的集合，包含快速链接，站点地图，如果您愿意的话)。

两列#col1和 #col2具有固定宽度(占浏览器窗口总宽度的百分比)。它们的高度应该如下:

• 如果内容为空或内容很少，两者/任何一个都应拉伸(stretch)以填充窗口，以便 #quick div 与浏览器窗口的底部对齐。
• 如果内容很多，两者都应该与#quick对齐在底部并很好地包装各自的内容，浏览器窗口像往常一样滚动。 (一个可能仍然是空的，但它的高度随后被定义/与另一个对齐。)

我不太明白的是如何制作 #col1和 #col2 divs正确拉伸(stretch)实现了以上两点。

编辑 仔细研究这些建议，我意识到拥有 #col1 并不是那么重要和 #col2大小相同。更重要的是(<table> 布局确实适用于此)是，如果这些列中没有/只有很少的内容，那么它们会拉伸(stretch)，以便 #quick链接粘在浏览器窗口的底部。 (我尝试将 bottom=0; 设置为 #quick，但没有成功。)

编辑 虽然下面的两个答案似乎都可以解决问题，但我想避免使用 Javascript 和对此过多的模糊处理。我最后做的是添加一个 div#col2 { minheight=100%; }它将 div 拉伸(stretch)到浏览器窗口的大小，并将 div#quick 向下推。无论如何，大多数页面都有大量的内容，所以效果很好；对于空白页面，底部只有一些空间并且工作正常:-)

Answer 1

如果不使用 JavaScript，#col1 和 #col2 不可能具有相同的高度。

但是，您可以通过在包含列的容器中使用背景图像来使它们看起来具有相同的高度:

<style type="text/css">
.header {height:100px; width:100%;}
.container {background:url('background_image_with_left_column.png') repeat-y left top;}
.leftColumn {float:left; min-height:300px; width:20%;}
.rightColumn {float:right; min-height:500px; width:80%;}
.footer {clear:both; float:left; width:100%;}
</style>

<div class="header">Header</div>
<div class="container">
    <div class="leftColumn">Left Column</div>
    <div class="rightColumn">Right Column</div>
</div>
<div class="footer">Footer</div>

即使列的高度不同，在列容器中有一个垂直重复的背景图像(1px 高度就足够了)，无论列中的内容如何，​​它们都会显示相同的高度。

如果您正在制作页面布局，我还建议使用 CSS 框架，例如 OO CSS，因为它们通常是跨浏览器兼容的。