顶部div背景颜色向下滚动后不显示

-1

我想创建一个覆盖div与背景颜色的离子内容已经有背景颜色的顶部。如果页面高度足以包含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

任何人都经历过这样的或知道的原因是什么？

来源

2016-12-13 CyJz

你要添加到整个页面，或者只在滚动的内容区域？。 – mayur

实际上，我想在离子内容的顶部创建具有不同颜色的叠加div。让我编辑一个更精确的问题。 – CyJz

尝试使用的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>

来源

2016-12-13 09:31:58

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

来源

2016-12-13 08:21:17

感谢您帮助Suraj，对于不准确的问题感到抱歉，实际上我想实现的目标是在离子成分上添加具有不同颜色的覆盖div。在这种情况下，应该已经有了自己的颜色。将编辑该问题。 – CyJz

顶部div背景颜色向下滚动后不显示

回答

相关问题