頂部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背景顏色向下滾動後不顯示

回答

相關問題