CSS: 100% height not working on div with display: table -
i have problem causes headache me hours now. have following html:
<ion-view class="menu-content" view-title="postkarte"> <ion-content> <div class="postcard-container"> <div class="postcard"> </div> </div> </ion-content> </ion-view>
and following css:
.postcard-container { display: table; position: absolute; background-color: yellow; height: 100%; width: 100%; } .postcard { display: table-cell; vertical-align: middle; background-position: center center; background-image: url("../img/frames/postcard_00.png"); background-size: contain; background-repeat: no-repeat; }
the result this:
so 100% width working 100% height ignored. why?
there no way control height
of table
. includes elements have display: table;
. height
adheres content in table
.
you have find other method achieve vertical centering.
Comments
Post a Comment