可伸缩页眉和页脚的语义标记

Question

基本上我只需要github的页眉和页脚。页眉和页脚的颜色与身体颜色不同，它们都会永远持续下去。

我的中心（主）div是固定宽度，这意味着我需要一个容器div。

我所拥有的是这样的：http://jsfiddle.net/Q2gS4/

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

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

这种结构是否足够语义？ （这就是github所做的）

 container
   header
   main-content
 footer

或者我应该坚持原来的

计划

 container
   header
   main-content
   footer

修改 我看到stackoverflow实际上也使用了github样式，其中页脚与容器的标题和主内容分开。这是做这样布局的一般方法吗？（请提供一些支持此内容的文章/链接）

Answer 1

不完全遵循您需要的容器。 HTML和BODY元素在大多数情况下都能生成足够的容器。

让页眉和页脚100％宽，主内容固定宽度，自动水平边距使其居中。

Answer 2

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

如果页面被修改为使用HTML5 <header>和<footer>元素，并且容器元素已更改为，例如<article>，那么页脚是在内部还是外部容器将更改语义，您必须确定页脚是文章的页脚还是页面的页脚。