如何在离子视图中设置40%的给定高度？

Question

我想在离子模式下设置40%的视图高度。实际上，我希望我的代码可以在所有屏幕分辨率上运行，所以为什么我给出的视图高度以% .But为单位，当我给出40%来查看它时，会占用很小的空间.But，当我给出200%时，它会占用更多的空间.Why，它不会占用给定空间的40%。

我就是这么用的

.a {
  height:200% !important;
  border :1px solid red;
  padding-top:1%;
}

当我给出高度: 40%时，它占用了很小的空间，为什么.It应该占用40%的屏幕分辨率。这是我的代码吗？

Answer 1

您可以使用vw/vh将元素的大小调整为相对于视口的大小(屏幕的实际大小)。这是CSS3的新产品。

因此，使用40vh可以恰好提供40%的屏幕高度。

.a {
  height:40vh !important;
/* width:80vw;*/
  border :1px solid red;
  padding-top:1%;
}

，

Answer 2

您需要了解什么时候在浏览器中应用CSS。

它们在DOM加载后立即应用。加载DOM的时刻不一定与将模板加载到主体中的时刻相同。因此，在加载DOM时，浏览器将尝试应用CSS，而您的html模板仍在script元素中。相对高度40%仅在应用CSS时存在具有高度的现有父元素时才有效。在本例中，父元素是一个脚本标记，因此它将向上冒泡，直到找到具有高度的内容，然后应用该父高度的40%。

一种可能的解决方法是，在呈现模板并将其添加到DOM之后，评估父级的高度，并以编程方式将40%的高度应用于刚刚添加的子级。