Body 不是 100% 高度而是 100% 视口

Question

我开始处理的简单项目，问题是 body 不是文档的 100% 高度，它是视口的 100%。这是一个问题，因为我想在未来使用 full-screen 元素。

  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 和 body 定义为 100% 的宽度和高度并删除填充和边距并没有解决问题，我运行通过 Whosebug 中的此类问题但是none 个解决方案对我有用。

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

有什么办法可以解决这个问题吗？

Answer 1

如果您想确保您的高度至少为 100%，但随后它会随内容增长，那么您应该使用 min-height: 100%.

而不是使用 height: 100%

但是，在您的示例中，您可能想知道为什么即使没有足够的内容，您仍然会看到一个垂直滚动条。那是因为 h1 的 margin-top 正在取代 parent 并使您的 body 不是从最顶部开始而是从 0.67em（这是 h1 的顶部边距，例如，默认情况下 Google Chrome 的用户代理）。

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

在 .header 中添加一个 padding-top: 1px。如果你想要像素完美，你还可以添加 margin-top: -1px.
将 overflow: auto 添加到 .header。
如果不需要h1，请删除margin-top

这是一个在 body 上使用 min-height: 100% 并在 .header 上使用 overflow: auto 的实现。查看 body 如何占据视口高度的至少 100%，或者如果它大于 100%，则其内容的高度。 https://jsfiddle.net/nprq5LLo/7/

Body 不是 100% 高度而是 100% 视口

Body not 100% height but 100% Viewport

html

css

height