CSS: height 100% ignored in ion-content

1

Im fighting with a special problem for hours now. I have got the following html code:

<ion-view class="menu-content" view-title="Postkarte">
    <ion-content>
        <div class="postcard-container">
            <div class="postcard">
                
            </div>
        </div>
    </ion-content>
</ion-view>

And this 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;
    width: 90%;
}

The result is the the following:

image
Screenshot_2015-08-25-10-20-47.png768×1280 23.8 KB

That means: The parent element does not seem to have a height so the 100% height of my div element is ignored. Does somebody know whats causing the problem?

1 Like
2

Add:

.scroll {
    height: 100%;
}

There’s another DIV between ion-content and your inner DIV’s. It will resize according to inner content but ONLY if it has a specific height, not including % values.

And learn how to use Chrome developer tools.

3

Thank you! Thank you very much!

4

I’m glad to be of help :slight_smile: