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:

enter image description here

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

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -