div上の背景色スクロールダウン後にイオンコンテンツが表示されない

Question

背景色を持つイオンコンテンツの上に背景色のオーバーレイdivを作成しようとしています。ページの高さがdivを含むのに十分であればうまくいきました。

ただし、divコンテンツの長さがページの高さを超えると、コンテンツがスクロールダウンされた後に選択した背景色が表示されません。

以下は私のコードです。

<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

誰もがこれを経験したか原因を知っていますか？

Answer 1

はmin-height: 100%代わりのheight: 100%を使用してみてください。これによりページよりも短いコンテンツがページ全体を占めますが、divは100％の高さを超えて成長することができます。他のCSSルールで変更されている場合は、さらにheight: autoを設定する必要があります。

主に、これはあなたが望む結果を生成する必要があります：

<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

divは可視領域にしか見えません。 これを試してみてください：

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