意外的滾動條

怎麼會有這個HTML文件可見的垂直滾動條？意外的滾動條

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <style> 
    html, body {border:0; margin:0; padding:0; height:100%} 
    h1 {margin:1em} 
    </style> 
</head> 
<body> 
    <h1>Test</h1> 
</body> 
</html>

（或該jsFiddle）

主體具有完全相同的高度窗口，很明顯。那麼，是什麼讓內容變大呢？我錯過了什麼？
（測試與IE，FF，鉻。）

來源

2012-03-06 Mr Lister

'max-height'而不是'height'解決了這個問題。 – Joey 2012-03-06 07:51:10

此行爲被稱爲「collapsing margins」。由於您的h1元素是body的第一個子元素，因此它會嘗試摺疊邊距，h1的邊距將以body標籤結尾。由於body已經是100％，因此增加的邊距會使其大於視口。

Read more on collapsing margins on w3c

來源

2012-03-06 07:57:07 Bazzz

但是......但是......這是否會使身體邊緣變大？_哦。我看到我需要閱讀「崩潰」的定義。不管怎麼說，還是要謝謝你。 – 2012-03-06 08:04:22

是的，這就是爲什麼它會產生你沒有想到的結果。 :)邊距實際上移動到body元素。 – Bazzz 2012-03-06 14:37:12

使用這樣的：

html {border:0; margin:0; padding:0; height:100%} 
     body {border:0; margin:0; padding:0}

來源

2012-03-06 07:48:44 SNAG

除去height: 100%或添加overflow: hidden。但要小心 - 100％意味着您的初始屏幕只有100％。

來源

2012-03-06 07:49:06 mkk

不，我不想讓溢出隱藏;如果內容實際上比窗口大，文檔需要有一個滾動條。如果內容較小，刪除高度會使背景混亂。但謝謝你試圖幫助！ – 2012-03-06 08:09:50

您的h1元素的頂部margin正在從文檔的頂部計算。

您可以改爲在此示例中使用padding。

來源

2012-03-06 07:49:16 alex

我以爲我知道計算如何工作。而且由於h1在體內，身體沒有任何邊距或填充，我認爲h1不會影響身體。顯然我錯了。 – 2012-03-06 08:05:42

邊距是當前元素與具有填充/邊距/邊框的下一個元素之間的間距。我不知道誰低估了，但隨時留下評論，我會解釋你不明白的。 – alex 2012-03-06 10:37:06

h1元素的邊距擴大了身體的內容，這已經是身高的100％。超過100％的高度導致滾動。

來源

2012-03-06 07:49:52 kinakuta

意外的滾動條

回答

相關問題