可拉伸页眉和页脚的语义标记
基本上我只需要 github 的页眉和页脚之类的东西。页眉和页脚的颜色与正文不同,并且它们都永远持续下去。
我的中心(主)div 是固定宽度的,所以这意味着我需要有一个容器 div。
我所拥有的是这样的: http://jsfiddle.net/Q2gS4/
我想对齐页眉、页脚和容器,但如果容器是唯一具有固定宽度的容器,则很难在不保持一致的情况下对齐它。
我想做的是为页眉和主体创建一个背景,然后将页脚分开,但它看起来像是一个肮脏的黑客,感觉它不符合语义。
这个结构语义够吗? (这就是 github 所做的)
container
header
main-content
footer
或者我应该坚持我原来的
container
header
main-content
footer
编辑 计划 我发现 stackoverflow 实际上也使用了 github 风格,其中页脚与带有标题和主要内容的容器分开。这是进行这样的布局的一般方法吗?(请提供一些支持此的文章/链接)
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)
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
没有完全遵循您需要容器的用途。大多数情况下,HTML 和 BODY 元素构成了足够的容器。
只需将页眉和页脚设置为 100% 宽,将主要内容设置为固定宽度,并使用自动水平边距将其居中即可。
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.
就目前情况而言,使用
时,容器 div 根本不会改变语义,因此任何一种结构都可以。
如果页面被修改为使用 HTML5
和
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.