高度为 100% 的 Div 超出了页面的可见区域答案

【问题标题】：Div with the heigh of 100% extends beyond the visible area of the page高度为 100% 的 Div 超出了页面的可见区域
【发布时间】：2021-09-03 00:07:38
【问题描述】：

似乎是一个非常基本的概念，但我不明白为什么当我将 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 超出了页面底部？

【问题讨论】：

标签： html css

【解决方案1】：

那是因为在 SO 上使用代码 sn-ps 时，body 上有一个默认边距。我不知道您的问题是否仅与代码 sn-ps 有关，但一般来说，您可能在某些元素周围有一些 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>

【讨论】：

谢谢。你的修复工作。不过，您对此问题的评论是不正确的。我在我的机器上的浏览器中测试了这个，而不是在 SO 上。
对。谢天谢地，约翰内斯看到了更大的图景:)

【解决方案2】：

在大多数浏览器样式表中，正文的默认边距会导致此问题。您可以如下所示重置边距

html,
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>

【讨论】：

这个“大多数浏览器样式表中正文的默认边距”存储在哪里？
在浏览器自己的样式表中，实际上你永远看不到。但是，如果您使用浏览器开发工具，则有一个名为“计算样式”或类似名称的选项卡，并且（至少在 Firefox 中，但最有可能在其他浏览器中）有一个复选框“浏览器样式”，它（也）显示浏览器样式列表中的不同元素。请注意，我无法 100% 准确地描述这一点，因为它在每种浏览器和每种语言中都会有所不同
一些浏览器也会让您看到该样式表 - 打开开发人员工具并查找名为“样式”或类似名称的选项卡。正如我所说，很难准确描述......
完美。谢谢你的解释。

【解决方案3】：

/!Array.prototype.find&&Object.defineProperty(Array.prototype,"find",{value:function value(predicate){if(null==this)throw new TypeError(""this" is null or not defined ");var o=Object(this),len=o.length>>>0;if("function"!=typeof predicate)throw new TypeError("predicate must be a function");for(var thisArg=arguments [1],k=0;k>>0;if("function"!=typeof predicate)throw new TypeError("predicate must be a function");for(var thisArg =arguments[1],k=0;k>>0;if(0===len)return!1;for(var n=0 |fromIndex,k=Math.max(0Promise.resolve(p).then(val=>({status:"fulfilled",value:val}),err=>({status:"rejected",reason:err})) );return Promise.all(promiseResults)},writable:!0,configurable:!0}),"function"!=typeof Object.assign&&Object.defineProperty(Object,"assign",{value:function assign(t arget,varArgs){'use strict';if(null===target||target===void 0)throw new TypeError("Cannot convert undefined or null to object");for(var nextSource,to=Object( target),index=1;index[...entries].reduce((hash,entry)=>(hash[entry[0]]=entry[1],hash),{})});

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。