CSS: height 100% ignored in ion-content


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

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

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:

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?



.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.


Thank you! Thank you very much!


I’m glad to be of help :slight_smile: