甚至两列布局，其中一列有页眉和粘性页脚答案

【问题标题】：Even two column layout where one column has a header and sticky footer甚至两列布局，其中一列有页眉和粘性页脚
【发布时间】：2011-09-08 11:21:51
【问题描述】：

我怎样才能创建一个看起来像这样的布局？（我愿意用桌子！）

我使用表格来确保 Col 1 和 Col 2 是偶数，但现在我不知道如何将页眉/页脚添加到 Col 2 <td>

【问题讨论】：

matthewjamestaylor.com/blog/…
@Jawad – 有什么理由更喜欢这种黑客攻击而不是基于表格的黑客攻击？我发现表格更容易理解（尽管仍然不是最理想的）
我也更喜欢基于表格的布局。唯一反对它的是它是现代网络开发中的“不，不”。我发现下面的解决方案比上面的链接好得多。还有其他解决方案，例如 Javascript 和 JQuery。但是总有一天，您将不得不从基于表格的布局转移到基于 CSS 的布局。 filamentgroup.com/lab/setting_equal_heights_with_jquery | abcoder.com/css/css-equal-height-columns

标签： css tablelayout

【解决方案1】：

纯粹是因为你已经明确表示你不介意using tables for layout，这里有一个基于表格的解决方案：

http://jsfiddle.net/mjQA3/

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="300" rowspan="3">Col 1</td>
        <td height="30">Col 2 Header</td>
    </tr>
    <tr>
        <td>Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br />Col 2 Content<br /></td>
    </tr>
    <tr>
        <td height="30">Col 2 Footer</td>
    </tr>
</table>

【讨论】：

我当然宁愿不使用表格，但如果我无论如何都需要 CSS hack，我不妨使用最简单的 hack（通常是一张桌子）。你会在这里使用不同的方法吗？
不幸的是，当 Col 1 的内容比 Col 2 多得多时，此解决方案在 Chrome 中不起作用：jsfiddle.net/mqNvX（图片：cl.ly/040f22340H1M1z362c3q）
我似乎无法在 Chrome 中找到解决此问题的方法。我想这就是为什么我大部分时间都倾向于使用基于 CSS 的解决方案 :) 基于 CSS 的技术的问题在于它们似乎都有一个（不同的）缺点。所以，有几个问题：这是否应该填充视口（页面上永远不会出现垂直滚动条），或者如果有大量内容，是否应该有垂直滚动条？必须支持哪些浏览器/版本？这个东西会填充视口的宽度，还是固定宽度并居中？我希望这些问题有意义，否则我会解释得更好。
"这应该填满视口吗" – 随着更多内容的添加，Col 1 和 Col 2 都应该垂直拉伸以适应它。两列都不应该包含垂直滚动条。浏览器：IE8+、Chrome、FF、Safari（IE7 也不错！）。 “这个东西会填充视口的宽度，还是固定宽度并居中？” - 两者都不;其中每一个都将包含一个“论坛帖子”，并且页面上会有几个。我可以通过在 Col 1 的底部添加一个“间隔”<td> 来完成这项工作，但是这种方法不必要地增加了 Col 1 的高度