html.fa-events-icons-ready 正在占用空间并弄乱 body 吗？

Question

我有几个关于我的代码及其结果的问题:

• 为什么高度不占高度的100%？你可以看到背景图像因此而困惑。显然是 html.fa-events-icons-ready 元素搞砸了？

• html,body 的“理想”初始 CSS 设置是什么？我找到了这个极简模板，这对简单的页面/应用来说是否合适？
  html,正文{
框大小:边框框；
margin :0；
填充:0；
}

这是 full code

Answer 1

100% 高度很有趣，你需要在 html 标签上设置它。此外， wrapper 上的边距导致背景拉伸(stretch)超过窗口的高度。

按照以下修改您的 CSS:

html, 
body {
  height: 100%;
}

.wrapper {
  padding: 50px;
  margin: auto;
}

这篇文章中接受的答案解释了高度的运作方式: height: 100% not working

此外，您还可以尝试 vh 单位( View 高度)，而不是 height:100%。例如height:100vh 不需要在父元素上设置高度。