问题
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)
回答1:
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.
回答2:
As it stands, using <div>s, the container div doesn't change the semantics at all, so either structure would be fine.
If the page was modified to use the HTML5 <header> and <footer> elements, and the container element was changed to be, say, <article> then whether the footer was inside or outside the container would change the semantics, and you'd have to decide whether the footer was the footer of the article or the footer of the page.
来源：https://stackoverflow.com/questions/5450936/semantic-markup-for-stretchable-header-and-footer