父容器不是＆＃34;维护＆＃34;同样的高度

Question

我发生了一个奇怪的CSS错误。

我能够将主要#app的高度调整为始终为给定屏幕尺寸的100％。 这适用于我的应用程序的每个页面，但一个。我不知道可能导致冲突的原因是因为每个页面上的类名称都是相同。

唯一的区别是有些网页的内容比其他网页少。但这应该重要吗？？我尝试添加!important，但没有骰子。

我有我的：

html, body {
  height: 100%;
  min-height: 100%;
}

 #app {
  background: url('someurl') no-repeat fixed;
  background-size: contain;
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin: 0 auto;
  display: inline-block; //this is what fixed in other pages
}

#app .child-container {
  float: right;
  z-index: 9999;
  margin: 30px auto 0 auto;
  width: 70%;
}

该错误看起来像以下示例： Ps：我删除了背景图片并添加了红色，只是为了显示#app的高度是如何发生莫名其妙的变化。

Answer 1

您可以尝试使用vh单位而不是百分比。 1 vh代表1％的视口，

因此

html, body {
  min-height: 100vh;
}

只需最小高度即可。

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/length

Answer 2

如果您想要HTML元素填充屏幕高度（或宽度） 你可以使用＆＃39; vh / vw＆＃39; （用于查看高度/宽度）而不是＆＃39;％＆＃39;在身上

html, body {
  height: 100vh;
}