https://jsfiddle.net/nprq5LLo/
我开始处理的简单项目，问题是正文不是文档的 100% 高度，而是视口的 100%。这是一个问题，因为我想在未来使用它使用全屏元素。
html {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
body {
background-size: 100% 100%;
background-color: #000;
color: white;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
将 HTML 和正文定义为 100% 的宽度和高度并删除填充和边距对解决问题没有任何帮助，我在 StackOverflow 中浏览了这种类型的问题，但没有一个解决方案对我来说有用。
我尝试添加 lorems 以使页面可滚动，但正文的实际高度与视口一样多，但下面的内容是可见的。
任何想法我们如何解决这个问题？
如果你想确保你的身高至少是100%，但它会随着内容的增长而增长，那么你应该使用min-height: 100%而不是使用height: 100%。
但是，在您的示例中，您可能想知道为什么即使没有足够的内容，您仍然会得到一个垂直滚动条。这是因为h1的边缘顶部取代了父级，使您的身体不是从最顶部开始，而是从0.67em开始(这是h1的顶部边缘，例如，默认情况下，谷歌浏览器的用户代理)。
有很多方法可以解决这个问题。您可以：
- 向
.header添加padding-top: 1px。如果你想成为像素完美，你也可以添加margin-top: -1px. - 将
overflow: auto添加到.header。 - 如果不需要，请删除
h1的margin-top
这是一个在正文上使用min-height: 100%并在.header上使用overflow: auto的实现。 查看正文如何至少占用视区高度的 100%，或者如果内容大于 100%，则如何占用其内容的高度。https://jsfiddle.net/nprq5LLo/7/