【问题标题】: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>

【问题讨论】:

标签: 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 的底部添加一个“间隔”&lt;td&gt; 来完成这项工作,但是这种方法不必要地增加了 Col 1 的高度
猜你喜欢
  • 1970-01-01
  • 2013-07-03
  • 1970-01-01
  • 2011-12-18
  • 2014-01-13
  • 2015-03-11
  • 1970-01-01
  • 2012-09-27
  • 1970-01-01
相关资源
最近更新 更多