Question

为什么这个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，Chrome测试。）

Answer 1

此行为称为“collapsing margins”。由于您的h1元素是body的第一个子元素，因此它会尝试使用它来折叠边距，h1的边距最终会显示在body标记处。由于body已经是100％，因此增加的边距将使其大于视口。

Read more on collapsing margins on w3c

Answer 2

你的h1元素的边距正在扩展身体的内容，这已经是身高的100％。超过100％的高度会导致滚动。

Answer 3

使用它：

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

Answer 4

删除height: 100%或添加overflow: hidden。但要小心 - 100％仅表示初始屏幕的100％。

Answer 5

您的h1元素的顶部margin正在从文档顶部计算。

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

意外的滚动条

5 个答案: