Question

似乎是一个非常基本的概念，但我不明白为什么当我将div的高度设置为100％时，它会延伸到页面的可见区域之外。我的页面是这样的：

<!DOCTYPE html>
<html lang="en-US" style="height: 100%;">
<head></head>

<body style="height: 100%;">	
	<div style="height: 100%; background-color: red">&nbsp;</div>
</body>

</html>

当我在浏览器中打开它时，浏览器会向页面添加一个垂直滚动条，我的div会超出底部：

如果我向下滚动一点，我会看到div的底部：

但为什么我的100％高度的div超出了页面的底部？

Answer 1

这是因为在SO上使用代码片段时，正文上有一个默认的边距。我不知道您的问题是否仅适用于代码段，但一般来说，您可能在某个元素周围有一些margin（或padding或类似的），这会导致div向下推

body {
  margin: 0;
}

<!DOCTYPE html>
<html lang="en-US" style="height: 100%;">

<head></head>

<body style="height: 100%;">
  <div style="height: 100%; background-color: red">&nbsp;</div>
</body>

</html>

Answer 2

大多数浏览器样式表中都有一个默认的边距，导致这种情况。您可以重置边距，如下所示

＆＃13;

html,
body {
  margin: 0;
}

＆＃13;

<!DOCTYPE html>
<html lang="en-US" style="height: 100%;">

<head></head>

<body style="height: 100%;">
  <div style="height: 100%; background-color: red">&nbsp;</div>
</body>

</html>

＆＃13;

高度为100％的Div超出了页面的可见区域

2 个答案: