CODEWITHSUNDEEP
jqueryhtmlcss
user1010101
user1010101

Reputation: 1658

Fixing Footer in Jquery Mobile

I have created a small fiddle but for some reason i have gray area in the bottom How do i get rid of it?

Here is the FIDDLE.

This is my code

<div data-role="page" data-theme="a">
        <div data-role="header" id="header" data-position="relative">

        </div>

        <div data-role="content" data-theme="b">
            <div data-role="collapsible" data-collapsed-icon="info" data-expanded-icon="info" data-collapsed="false">

                 <h4 style="text-align:center;">Product Information</h4>
       <fieldset data-role="controlgroup" id="material">
<h5>
Serial#: W292059828
CD Key:  1545655465
Lisenced Users: 5
Active Sites: 10
</h5>
</fieldset>







          <h3 style="text-align:center;">Resource Software International</h3>
          <div id="addr"><p>40 King St. W., Suite 300, Oshawa, Ontario,L1H 14A <br />
          Phone: (+1)905-576-4575 Fax: (+1)905-576-4705 <br />
          http://www.telecost.com Email:[email protected]<p></div>
              </div>
                </div>

Upvotes: 0

Views: 69

Answers (2)

mdon88
mdon88

Reputation: 314

Do this:

.ui-page {background: #ccc;}

That will set the background to match the colour that's used at the bottom of your content's gradient.

Upvotes: 1

lux
lux

Reputation: 8436

The gray area you're noting is simply the unused real estate of the page since the footer isn't sticky. Try making your footer sticky: http://css-tricks.com/snippets/css/sticky-footer/

Upvotes: 0

Related Questions