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具有固定宽度（以浏览器窗口总宽度的百分比表示）。他们的身高应该如下：

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

我无法弄清楚的是如何使#col1和#col2 div正确拉伸以实现上述两点。

编辑玩弄建议我意识到让#col1和#col2的大小相同并不重要。更重要的是（<table>布局确实有用）是如果这些列中没有/很少的内容，那么它们会拉伸，以便#quick链接粘在浏览器的底部窗口。（我尝试为bottom=0;设置#quick，但这不起作用。）

编辑虽然以下两个答案似乎都解决了这个问题，但我想避免使用Javascript和过多的模糊测试。我最终做的是添加一个div#col2 { minheight=100%; }，它将div拉伸到浏览器窗口的大小，并将div＃快速向下推。大多数页面都有很多内容，所以效果很好;对于空白页面，底部只有一些房间，工作正常： - ）

Answer 1

请参阅下面的fiddle

http://jsfiddle.net/TCdsK/7/

更新小提琴，确保两列高度相同

http://jsfiddle.net/TCdsK/14/

我希望就是这样，哈哈

Answer 2

＃col1和＃col2不能在不使用JavaScript的情况下具有相同的高度。

但是，通过在包装列的容器中使用背景图像，可以使它们显示为相同的高度：

<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，因为它们通常是跨浏览器兼容的。

使用DIV元素的动态列HTML页面布局

2 个答案: