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

发布于 2024-10-26 23:27:26 字数 643 浏览 4 评论 0原文

基本上我只需要 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

夜清冷一曲。 2024-11-02 23:27:26

没有完全遵循您需要容器的用途。大多数情况下,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.

农村范ル 2024-11-02 23:27:26

就目前情况而言,使用

时,容器 div 根本不会改变语义,因此任何一种结构都可以。

如果页面被修改为使用 HTML5

元素,并且容器元素更改为 < Article> 那么页脚是在容器内部还是外部都会改变语义,并且您必须决定页脚是文章的页脚还是页面的页脚。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文