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

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>

Answer 2

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

顶部离子背景颜色在向下滚动后不显示离子内容

2 个答案: