style a div to have the same background color after scrolling

Question

My Android phonegap application has one scrollable div as below:

HTML

<div data-role="page" id="home">
<div data-role="content" id="mContent" >

CSS

div#home{
    position: relative;
    background-color: #EFEFEF;
    overflow: scroll;
    margin: 0;
    padding: 0;
    min-height:100%;    
}

div#mContent{
    width: 100%;
    overflow:scroll;
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
    min-height:100%;    
    display: inline-block;
}

My problem is that the background color (only on some device) is present only for the height which is initially displayed but when I scroll the rest gets black.

I tried with all the solution proposed in this similar SO post (in my case, using min-height) but noone of them helped.

@DawsonLoudon I am not very sure that this is not related to cordova, as I have'nt tried in another context — eeadev, Oct 31 '14 at 17:45
Try setting div#mContent to have a height of 100% as well as having the min-height — , Oct 31 '14 at 18:05

score 0 · Accepted Answer · answered Nov 03 '14 at 13:44

0

solution was

div#mContent {
    width: 100%;
    overflow:scroll;
    margin: 0;
    padding: 0;
    background-color: #EFEFEF;
}

and

<div data-role="content" id="mContent " class="mContent" style="overflow:auto;">

answered Nov 03 '14 at 13:44

eeadev

3,662
8
47
100

style a div to have the same background color after scrolling

1 Answers1