Element size in Percentage

[Manuel]

Hello,

 I want to set the size of a div within my View to a certain percentage value via css. However, while this works in the Android-Simulator, on a device the height always resets to 0, so nothing is visible within the View-Element.

My Code:

CSS

#logo{
    top:2%;
    position: absolute;
    width:100%;
    height:height: 38%;
    background-image: url("../media/img/logo.png");
    background-size:contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
#imageText{
    position: absolute;
    top:45%;
    left:3%;
    width:94%;
    height: 55%;
    text-align: center;
    font-size: 24pt;
    color:white;
    overflow: auto;
}

HTML:

 <div data-role="view" data-title="Home" data-layout="main" data-model="APP.models.home">
   <div id="logo"></div>
   <div id="imageText" data-bind="text:text"></div>
</div>

[Tsvetina]

Hello Manuel,

This happens because there isn't a parent element to your element that has a fixed size. Height can be set in percentage only when there is a parent element with fixed size in the DOM. You can consider using a flexbox layout to arrange the elements in your view:
A Complete Guide to Flexbox

Regards,
Tsvetina
Telerik