身体不是100％高度，而是100％视口

Question

https://jsfiddle.net/nprq5LLo/

简单的项目我开始研究，问题是身体不是文件的100％高度，它的视口是100％。这是一个问题，因为我希望将来使用全屏元素。

<input type="button" id="myButton"/>

使用100％宽度和高度定义html和body并删除填充和边距没有解决问题，我在stackoverflow中运行了这类问题，但没有一个解决方案对我有用。

我尝试添加lorems以使页面可滚动，但是身体的实际高度与视口一样多，但下面的内容是可见的。

我们如何解决这个问题？

Answer 1

如果您想确保自己的身高至少达到100％，但随着内容的增长而增长，那么您应该使用height: 100%而不是min-height: 100%。

但是，在您的示例中，您可能想知道为什么即使没有足够的内容您仍然可以获得垂直滚动条。那是因为h1的边缘顶部正在取代父母，让你的身体不是从顶部开始，而是在0.67em（这是h1的最高边缘）例如，默认情况下，谷歌Chrome的用户代理）。

有很多方法可以解决这个问题。你可以：

• 向padding-top: 1px添加.header。如果您想要像素完美，您还可以添加margin-top: -1px。
• 将overflow: auto添加到.header。
• 如果您不需要，请移除margin-top的{​​{1}}

这是一个在正文上使用h1并在min-height: 100%上使用overflow: auto的实现。 查看身体如何至少视口高度的100％或其内容的高度（如果它大于100％）。 https://jsfiddle.net/nprq5LLo/7/