【问题标题】:Three column layout with fixed columns固定列的三列布局
【发布时间】:2011-11-28 08:11:09
【问题描述】:

我正在寻找带有页眉和页脚的三列布局(全屏)(非液态/流体设计)。即

  • 当我调整浏览器大小时,我的内容不应被替换。
  • 另外,无论三列中的哪一列是最长的页脚, 进入底部。
  • 最后,即使 3 列没有内容填满页面,页脚也会出现在底部。

(还需要建议,哪种方法可以使我的设计在几乎所有主流浏览器中保持不变,是 %(table, tr,td), px 还是他们?)

换句话说,就像 facebook。

【问题讨论】:

  • 我发现了类似的问题,但布局流畅stackoverflow.com/questions/8283225/…
  • 我不知道this 是否有帮助,但是当我搜索“带有粘性页脚的 3 列布局”时,这是 Google 中的第一个结果。
  • @bookcasey 感谢您的链接,但中间容器是液体:-(
  • 一个布局怎么可能是浏览器的全宽,但它的任何部分都不是流畅的?从数学上讲,800 像素(或其他)宽的东西无法适应(全宽)400 像素的浏览器窗口和 1400 像素的窗口而不进行更改。

标签: html css layout


【解决方案1】:

如果您正在寻找 3 列设计,则最好使用 div 元素并为每列使用特定的 %。如果您在 px 或 em 中使用固定宽度,则在调整大小时可能会遇到麻烦(列移动到彼此下方)。但是,如果您使用百分比并调整大小,您会在低于某个分辨率时遇到问题,但对于较大的分辨率,% 通常更完美。百分比方法的一个缺点是您不能始终按照您想要的方式布置页面,因为百分比会使列的宽度根据查看的屏幕而变化。

确保页脚位于列下方可以通过在最后一列或列之后但在页脚之前的 br 元素上使用 clear css 标签来实现。

更新:

底部有页脚的 3 列布局示例:http://puu.sh/9tga

带有 3 列、页眉、页脚的示例:http://puu.sh/9tm6

带有固定页眉和页脚的示例:http://puu.sh/9toj

【讨论】:

  • 那么,我可以使用 代替
    吗?
  • 你可以使用一个表格,一个只有 3 个单元格的表格会更容易......但是,(我是一名学生信息学,所以我的老师)人们建议使用 div,因为这在语义上更好。表格是用来列出信息的,而不是为了使布局合适。过去使用它,但现在使用 css 和 div 可以达到相同甚至更好的效果。我会在几分钟后用 div 的例子更新答案。
  • 感谢完美的例子。我希望我能在其中获得页眉和页脚。因为我在 CSS 和设计方面非常薄弱
  • 里面已经有一个页脚,并且可以通过在
    之前添加一个 div 并使用 css 将宽度设置为 100% 来简单地添加一个页眉。我将对当前示例稍作改动,以便您了解它的外观。
【解决方案2】:

听起来您可以使用 Twitter Bootstrap 并使用 3 列布局(或在其他布局中进行选择)。

【讨论】:

  • 感谢您的链接,这该死的信息丰富且有用。我可以将其中的 Javascript、CSS 和 HTML 用于商业网站吗?
猜你喜欢
  • 2015-05-18
  • 2013-12-30
  • 2012-01-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-27
  • 1970-01-01
相关资源
最近更新 更多