2

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

这是我想做的。

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

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

我不太清楚的是如何使#col1和#col2div 正确拉伸以实现上述两点。

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

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

4

2 回答 2

0

请看fiddle下面

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

更新了 Fiddle 以确保两列的高度相同

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

希望是这样，哈哈

于 2013-07-14T07:58:14.323 回答
0

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

于 2013-07-14T10:09:26.717 回答