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

我想设置40%的给定高度，以便在爱奥尼亚？事实上，我希望我的代码能在所有屏幕分辨率下运行，所以我给出的视图高度是%。但是当我给出40%的视图时，它占用的空间很小。但是当我给出200%时，它占用的空间更多。为什么它不占用给定空间的40%

我以前也是这样

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

当我给出高度：40%时，它占用的空间很小。为什么。它应该占用屏幕分辨率的40%。

---

这是我的代码？

您需要了解CSS何时应用于浏览器

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

---

一种可能的解决方法是，在渲染模板并将其添加到DOM后，计算父级的高度，并以编程方式将40%的高度应用到刚才添加的子级。

您需要了解CSS在浏览器中的应用时间

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

---

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

可以使用vw/vh根据视口的大小（屏幕的实际大小）调整元素的大小。 这是CSS3的新单元

因此，使用40vh精确给出屏幕高度的40%

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

---

，

您可以使用vw/vh根据视口的大小（屏幕的实际大小）调整元素的大小。 这是CSS3的新单元

因此，使用40vh精确给出屏幕高度的40%

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

---

，

你知道角的还是离子的？你知道角的还是离子的？