Question

我想设置40％给定高度来观察离子？实际上我希望我的代码将在所有屏幕分辨率上运行，这样我为什么要以％为单位给出视图高度。但是当我给出40％的视图时它占用的空间很小。但是当我给出200％它需要更多的空间。为什么它是没有占用40％的特定空间。

我喜欢那样

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

当我给出高度：40％它占用小空间为什么。它应该占据屏幕分辨率的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的那一刻不一定是模板加载到BODY中的那一刻。因此，在加载DOM时，浏览器将尝试应用您的CSS，而您的html模板仍在脚本元素中。相对高度40％仅在应用CSS时才有效，存在具有高度的现有父元素。在这种情况下，父元素是一个脚本标记，因此它会冒泡直到找到具有高度的东西，然后应用该父高度的40％。

一种可能的解决方法是，当您渲染模板并将其添加到DOM后，您评估父级的高度并以编程方式将40％的高度应用于刚刚添加的子级。

如何在离子中设置40％给定高度？

2 个答案: