高度爲100％的塊元素; ＆wrapper元素 - 內容重疊

Question

我想弄清楚如何將HTML5標記&與我的網站的佈局相結合，這不符合預期。

我的網站標題設置爲height: 100%填寫完整屏幕：Fiddle。

現在，根據HTML5 Spec，所述main元件應該用於標記一個網站的主要部分：

主要元件代表一個文檔或應用程序的主體的主要內容。主要內容區域由與文檔的中心主題或應用程序的中心功能直接相關或擴展的內容組成。

這是我麻煩開始的地方。
當我加入main元素或纏上了我的內容的任何其他塊元素，頭不具備正確的高度了：Fiddle

我明白，這是因爲在報頭中的height: 100%;引用父 - 本例中的main元素。由於沒有聲明身高，height: 100%;規則沒有提及。

爲了解決這個問題，我必須聲明height: 100%也main元素：Fiddle

現在的問題是：由於main元素是有來標記網頁的主要內容，像導航&頁腳元素不屬於那裏：

文檔的主要內容區域包括對該文檔唯一的內容，並且排除在一組文檔中重複的內容，例如站點導航鏈接，版權信息，站點標誌和橫幅和搜索表單（除非文檔或應用程序的主要功能是搜索表單的功能）。

如果我添加了main元素下面的內容，這些內容重疊main元素，因爲它填補所有可用空間：Fiddle

我已經與頁腳設置各種高度聲明玩耍了，但沒有任何運氣。

而且，我嘗試過各種overflow聲明，用有限的成功（雙滾動條）：Fiddle

是否有一個修復 - 將是一種恥辱，如果標記不會與佈局兼容？

Answer 1

你的小提琴真的到處都是，我會說實話。這主要是由於您嵌套的元素不是被設計爲嵌套的。 （即標題應該在你的主體中，它們應該在它之上等）。

你的結構應該是這樣的：

<header> 
</header> 

<main> 
</main> 

<footer> 
</footer> 

Fiddle example

---

然後你需要看看你的一個你的頁面的定位。

所以，標題總是在頂部，而您的頁腳始終「位於主底部」。由於我只將min-height放置在我的主體上，因此應該解決「重疊」問題（因爲主體會自動達到所需的高度）。

那麼，你就需要設置你的頭

header,footer{ 
 
    background:red; 
 
    height:150px; 
 
    } 
 

 
main{ 
 
    min-height:100%; 
 
    }

<header>head</header> 
 
<main>main content</main> 
 
<footer>footer</footer>

---

你的整體標記的高度將因此是這樣的：

this fiddle

，或者：

這個片斷：

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.myHeader { 
 
    background-color: red; 
 
    height: 150px; 
 
} 
 
footer { 
 
    background: blue; 
 
    height: 150px; 
 
} 
 
main { 
 
    min-height: 100%; 
 
}

<header> 
 
    <div class="myHeader"> <b>Header</b> 
 

 
    </div> 
 
</header> 
 
<main> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata 
 
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
 
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
</main> 
 
<footer> 
 
    <p>Footer Content</p> 
 
</footer>