可伸縮頁眉和頁腳的語義標記

基本上我只需要類似github的頁眉和頁腳。頁眉和頁腳有不同的顏色比身體，他們都永遠持續下去。可伸縮頁眉和頁腳的語義標記

我的中心（主）div是固定寬度，所以這意味着我需要有一個容器div。

我想對齊頁眉，頁腳和容器，但如果容器是唯一一個固定寬度，這是很難保持一致而不被一致。

我想要做的是爲頁眉和主體創建一個背景，然後將頁腳分開，但它看起來像一個骯髒的黑客，感覺它不是語義。

這個結構是否足夠語義化？（這是GitHub上做什麼）

container 
    header 
    main-content 
footer

，或者我應該堅持我原來的

container 
    header 
    main-content 
    footer

編輯的計劃 我看到計算器實際上還使用GitHub的風格與頁腳來自不同地方具有標題和主要內容的容器。這是做這樣的佈局的一般方式嗎？（請提供一些支持這種佈局的文章/鏈接）

來源

2011-03-27 corroded

不遵循你所需要的容器。大多數情況下，HTML和BODY元素都會生成足夠的容器。

只要您的頁眉和頁腳100％寬，並且您的主內容固定寬度以自動水平頁邊距爲中心即可。

來源

2011-03-27 20:01:38

問題是，頁眉和頁腳本身也應該是「固定寬度」......從某種意義上說，它應該對齊內容的兩種方式。從他們伸出的唯一的東西是他們的背景圖片 – corroded 2011-03-28 08:08:43

@corroded：我明白你想要做什麼。看起來你的頁眉和頁腳本身可能需要自己的內部容器才能這樣做。儘管標題的背景可能是HTML或BODY上的平鋪背景，但是保持語義的語義，我會將背景放到標題中。 – 2011-03-28 21:36:50

@corroded：喜歡這個？ http://jsfiddle.net/WctZ4/ – 2011-03-28 21:45:25

現在，使用<div> s，容器div根本不會改變語義，所以任何結構都可以。

如果頁面被修改爲使用HTML5 <header>和<footer>元素，容器元素變更爲，也就是說，<article>頁腳那麼是否是內部或容器外將改變語義和你」 d必須決定頁腳是頁面的頁腳還是頁腳。

來源

2011-03-27 20:53:10 Alohci

即時通訊不是實際使用額外divs的粉絲只是爲了佈局的目的，我認爲具有標題和主要內容（沒有頁腳）的容器不是「語義」，因爲im只是繞過它給出的限制。我錯了嗎？ – corroded 2011-03-28 08:09:54

@腐蝕 - 你沒有錯。 divs根本沒有傳達任何語義。我同意額外的格式佈局並不理想，但它們往往是必要的，因爲CSS仍然有很大的弱點。如果瀏覽器實現了[CSS3生成和替換的內容模塊]（http://www.w3.org/TR/css3-content/），那麼許多這樣的包裝將變得沒有必要，但在該領域似乎沒有什麼活動。 – Alohci 2011-03-28 08:19:54

我看到我看到了，然後生病只需要處理像githubs那樣的容器div。真的沒有其他「美麗」的解決方案來解決這個問題嗎？我認爲這是一個相當普遍的問題 – corroded 2011-03-28 08:34:40

可伸縮頁眉和頁腳的語義標記

回答

相關問題