div background color on top ion-content not showing after scroll down

Question

I am trying to create an overlay div with background color on top of ion-content which already have a background color. It worked well if the page height is enough to contain the div.

However when the div content length exceeds the page heights, the selected background color is not showing after the content is scrolled down.

The following is my code.

<ion-content style="background-color: blue;>
    <div style="height: 100%; background-color: red;">
        <h3>Ionic Menu Starter</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio laudantium, magniam fugiat,is distinctio, denter code hereolores similique voluptate nam! Quis, similique. Nostrum, velit.....</p>
    </div>
</ion-content>

This is the output after the content is scrolled down

Anyone experienced this or know the cause?

Answer 1

Try using min-height: 100% instead of height: 100%. This will make content that is shorter than the page take up the entire page, but will still allow the div to grow past 100% height. You might additionally have to set height: auto if it's getting changed in some other CSS rules.

Mainly, this should produce the result you want:

<ion-content style="background-color: blue;>
    <div style="min-height: 100%; background-color: red;">
        <h3>Ionic Menu Starter</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio laudantium, magniam fugiat,is distinctio, denter code hereolores similique voluptate nam! Quis, similique. Nostrum, velit.....</p>
    </div>
</ion-content>

Answer 2

The div seems to be only the visible area. Try this:

<ion-content style="background-color: red;">
    <div style="height: 100%;">
        <h3>Ionic Menu Starter</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio laudantium, magniam fugiat,is distinctio, denter code hereolores similique voluptate nam! Quis, similique. Nostrum, velit.....</p>
    </div>
</ion-content>