I want to set 40% given height to view in ionic ? Actually I want my code will run on all screen resolution so that why I am giving view height in % .But when I am giving 40% to view it take small space .But when I give 200% it take more space .Why it is not taking the 40% of given space .
I used like that
.a {
height:200% !important;
border :1px solid red;
padding-top:1%;
}
when I give height:40% it take small space why .It should take 40% of screen resolution . here is my code ?
You can size elements to be relative to the size of the viewport(real size of screen) using vw/vh. It is new units from CSS3.
So use 40vh to give exactly 40% of screen height.
.a {
height:40vh !important;
/* width:80vw;*/
border :1px solid red;
padding-top:1%;
}
,
You need to understand when the CSS is applied in browsers.
They are applied as soon as the DOM is loaded. The moment your DOM is loaded is not necessarily the same moment your template is loaded into the BODY. So, at the moment the DOM is loaded, the browser will attempt to apply your CSS while your html template is still within the script element. The relative height 40% only works if at the moment the CSS is applied there is an existing parent element that has a height. In this case, the parent element is a script tag and so it will bubble up until it finds something that has a height and then apply 40% of that parent height.
A possible workaround is that when you render the template and after you added it to the DOM that you evaluate the parent's height and programmatically apply the 40% height to the child that you just added.