Change the background color on jQuery mobile of main content which will be shown on phone

Question

In jQuery mobile, when I try to change the background color of the main content it only does it partially and doesn't fill up the whole area in height. This will be used on mobile devices and I want the background color to extend and be responsive so it takes up the entire height of any device.

It's hard to demonstrate on jsfiddle but here is the link: http://jsfiddle.net/1od6kszg/

This is my css code:

.ui-content {
    background-color: green;
}

Please let me know how I can change the entire background to a different color.

Thanks

Answer 1

I'm not sure if I fully understand the question - you want to display a background color that entirely fills the height of any device and has a different color on mobile devices. To apply a background color for the full height, you can set the background color for .ui-page instead of .ui-content. Your Fiddle missed including jQuery mobile and a jQuery library, I've added that to the updated Fiddle.
When you inspect the HTML with a web dev tool, you'll notice that the body in the result part of the Fiddle has among some other classes .ui-page. This is applied by jquery mobile. So setting the background color to .ui-page will cover the full height.

In case you want to display a different color for devices with a smaller screen width, you can achieve this by using media queries. In the Fiddle I've just added one for screen width 320px:

@media all and (max-width: 320px) {
  .ui-page {
     background-color: red;
  }
}

You'll notice that the background color changes when you narrow the result window.

A different approach would be to adjust .ui-content to get 100% screen height. This can be done by adding some javascript. As I'm not sure if that's really needed (because changing to .ui-page already sets the full height background color) and don't want to copy code from another answer just check the answer given here set content height 100% jquery mobile for the relevant script.