可伸缩页眉和页脚的语义标记 [英] semantic markup for stretchable header and footer

问题描述

基本上我只需要像github的页眉和页脚这样的东西。页眉和页脚有不同的颜色比身体，他们都永远持续下去。

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

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

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

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

这种结构是否足够语义化？ （这是github的作用）

  container 
标题
 main-content 
 footer 
  

或者我应该坚持我最初的计划

  container 
 header 
 main-content 
 footer 
  

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

解决方案

你需要什么容器。 HTML和BODY元素在大多数情况下都会生成足够的容器。

只需将页眉和页脚宽度设置为100％，并将主内容固定宽度设置为自动水平-margins居中。

Basically I just need something like github's header and footer. The header and footer have different colors than the body and they both go on forever.

My center(main) div is fixed width, so that means I need to have a container div.

What I have is something like this: http://jsfiddle.net/Q2gS4/

I would like to align the header, footer and container, but if the container was the only one with fixed width, it is hard to align it without being consistent.

What I thought of doing was to create a background for the header and the main body then separate the footer but it looks like a dirty hack and feels like it's not semantic.

Is this structure semantic enough? (this is what github does)

 container
   header
   main-content
 footer

or should I stick with my original plan of

 container
   header
   main-content
   footer

EDIT I see that stackoverflow actually also uses the github style where with the footer separate from the container with the header and main-content. is this the general way of doing layouts like this?(please provide some articles/links that support this)

解决方案

Not following exactly what you need the container for. The HTML and BODY elements make adequate containers the majority of the time.

Just have your header and footer 100% wide and your main-content fixed-width with auto-horizontal-margins to center it.

这篇关于可伸缩页眉和页脚的语义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！