可拉伸页眉和页脚的语义标记答案

【问题标题】：semantic markup for stretchable header and footer可拉伸页眉和页脚的语义标记
【发布时间】：2011-07-23 23:36:21
【问题描述】：

基本上我只需要 github 的页眉和页脚之类的东西。页眉和页脚的颜色与正文不同，它们都将永远存在。

我的 center(main) div 是固定宽度的，这意味着我需要一个容器 div。

我想对齐页眉、页脚和容器，但如果容器是唯一具有固定宽度的容器，如果不保持一致就很难对齐。

我想做的是为页眉和主体创建一个背景，然后将页脚分开，但它看起来像一个肮脏的黑客，感觉它不是语义的。

这个结构足够语义化吗？（这就是 github 所做的）

 container
   header
   main-content
 footer

还是我应该坚持我原来的计划

 container
   header
   main-content
   footer

编辑我看到 stackoverflow 实际上也使用 github 样式，其中页脚与带有页眉和主要内容的容器分开。这是做这样的布局的一般方式吗？（请提供一些支持这一点的文章/链接）

【问题讨论】：

【解决方案1】：

没有完全遵循您需要容器的目的。 HTML 和 BODY 元素在大多数情况下构成了足够的容器。

只需将页眉和页脚设为 100% 宽，主内容固定宽度并使用自动水平边距使其居中。

【讨论】：

问题是页眉和页脚本身也应该是“固定宽度”......从某种意义上说，它应该与内容对齐。他们唯一可以拉伸的是他们的背景图片
@corroded：我明白你在做什么。看起来你的页眉和页脚本身可能需要他们自己的内部容器来做到这一点。虽然标题的背景可以是 HTML 或 BODY 上的平铺背景，但为了保持语义，我会将背景赋予标题。
是的，但我尝试将宽度设置为像素，但失败了。它只适用于百分比？
顺便更新了问题。如果您可以提供答案和支持它的链接，那么我很好
@corroded: 只适用于百分比？！我只是从百分比更改为像素（jsfiddle.net/WctZ4/1），没有问题。如何失败了？也许你把它设置得太宽了，看不到效果。

【解决方案2】：

就目前而言，使用<div>s，容器 div 根本不会改变语义，因此任何一种结构都可以。

如果页面被修改为使用 HTML5 <header> 和 <footer> 元素，并且容器元素被更改为，比如说，<article>，那么无论页脚在容器内部还是外部都会改变语义，你必须决定页脚是文章的页脚还是页面的页脚。

【讨论】：

我不喜欢仅出于布局目的实际使用额外的 div，我认为带有页眉和主要内容（没有页脚）的容器不是“语义”，因为我只是绕过限制由它给出。我在这里弄错了吗？
@corroded - 你没看错。 div 根本没有传达任何语义。我同意额外的 div 布局并不理想，但它们通常是必要的，因为 css 仍然有很大的弱点。如果浏览器实现了CSS3 Generated and Replaced Content Module，那么很多这样的包装器就变得不必要了，但是在那个领域似乎没有什么活动。
我明白了，那么我只需要处理像 githubs 这样的容器 div。这个问题真的没有其他“美丽”的解决方案吗？我认为这是一个很常见的问题
更新了我的问题顺便说一句，如果你能回答并提供一个支持这个的链接，我可以接受你的回答:)