默認情況下Chrome身體和html高度爲100％

假設您希望自己的內容佔用視口高度的100%。您以前必須將html和body元素的高度設置爲100%。通過這種方式，你可以給body元素的百分比高度的直接後裔，以及像這樣：默認情況下Chrome身體和html高度爲100％

<head> 
    <style> 
    html, body { height: 100% } 
    body { margin: 0; } 
    header, footer { height: 10% } 
    main { height: 80% } 
    <style> 
</head> 
<body> 
    <header>Intro</header> 
    <main>The Main Stuff</main> 
    <footer>Additional Details</footer> 
</body>

的html, body { height: 100% }聲明不再需要設置在Chrome中直接後裔的百分比高度。但是，它仍然需要在Firefox中。

這是2月初發布的Chrome最新更新中的一個錯誤嗎？或者height現在默認設置爲100%？

只是爲了澄清，我並沒有問如何實施基於百分比的佈局。我更多地詢問Chrome實現body和html元素的默認高度。這可能是非常容易混淆新手開發人員誰可能會認爲，html和body不需要明確定義的高度，如果他們希望body的直系後裔有基於百分比的高度。

來源

2017-02-16 Kevin Behan

這真的取決於瀏覽器。您最安全的選擇是，如果您必須使用百分比高度，則需要在父級上定義高度。否則，一個更簡單的替代方案就是'main {height：80vh; }'和'header，footer {height：10vh; }'。 –

在您提供的代碼中，html和body佔據頁面高度的100％，因爲沒有doctype聲明。如果沒有提供doctype，大多數瀏覽器將恢復到「怪癖」模式。

如果添加HTML5文檔類型（<!DOCTYPE html>），則應該發現body和html元素不再佔用整個視口而沒有明確的高度。

來源

2017-05-23 17:16:54 Sidney

我不能說是否有錯誤或沒有，但爲了確保您的元素佔用視高度的100％，你應該使用100vh：

html, body { 
    height: 100vh; 
}

百分比基於高度總是相對於直接父母。由於沒有父級<html>，因此您會希望它的默認高度爲0px。某些瀏覽器可能會解釋如何處理<body>的父項，因此只需使用vh測量<body>標記是最安全的。

注意，您可以使用vh單位上任何元素 - 不只是<html>和<body>！

希望這會有所幫助！

來源

2017-02-16 03:07:45

如果您使用視口百分比單位，則不需要在'html'和'body'上指定高度。您可以將其直接應用於您的內容元素（就像使用像素高度一樣）。 –

正確，但我的答案並不十分清楚。我剛剛更新了答案，還提到了:) –

默認情況下Chrome身體和html高度爲100％

回答

相關問題