CODEWITHSUNDEEP
css
Mulgard
Mulgard

Reputation: 10569

CSS: 100% height not working on div with display: table

I have a problem which causes headache for me for hours now. I have the 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 the 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 is this:

enter image description here

So the 100% width is working but the 100% height is ignored. Why?

Upvotes: 2

Views: 1367

Answers (1)

connexo
connexo

Reputation: 56744

There is no way to control the height of a table. This includes elements that have display: table;. The height always adheres to the content in a table.

You will have to find some other method to achieve your vertical centering.

Upvotes: 3

Related Questions