意外的滚动条

怎么会有这个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

意外的滚动条

回答

相关问题