Home/ Questions/Q 7813569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T04:55:00+00:00

I’m trying to amend the height of a footer using below css. If I

  • 0

I’m trying to amend the height of a footer using below css. If I set the height using pixels it will resize to the correct amount of pixels(eg height : 100px;). Setting a percentage value as below does not seem to work. I just want to set the footer to be a percentage height of the entire screen height, so as to cater for differing screen heights. Is there a way to accomplish this ?

Here is the code I’m using : : 

.ui-page .ui-footer .ui-navbar a {
    height : 60%;
}

        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="/view" data-role="tab" data-icon="grid">View</a></li>
                    <li><a href="/add" data-role="tab" data-icon="grid"
                        class="ui-btn-active">Add</a></li>
                    <li><a href="/edit" data-role="tab" data-icon="grid">Edit</a></li>
                </ul>
            </div>
        </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is a jQuery Mobile specific answer for ya’.

    If you want to alter the height of the footer, then I suggest targeting the footer with your CSS rather than targeting some descentant element of the footer:

    ​.ui-mobile .ui-page .ui-footer {
    height : 30%;
}​

    Here is a demo: http://jsfiddle.net/csKtX/1/ (make sure to see the update below)

    • .ui-mobile is applied to the HTML element when jQuery Mobile initializes.
    • .ui-page is applied to any initialized pseudo-page.
    • .ui-footer is applied to any initialized footer

    Update

    I pasted your footer code into my JSFiddle and found-out that the navbar widget does not take the height of it’s container (most likely your initial issue anyhow…). Here’s the fix for jQuery Mobile 1.1.0:

    .ui-mobile .ui-page .ui-footer > div,/*navbar container*/
.ui-mobile .ui-page .ui-footer ul,/*list-item container*/
.ui-mobile .ui-page .ui-footer ul li,/*list-items*/
.ui-mobile .ui-page .ui-footer ul li a/*individual buttons*/ {
    height : 100%;
}​

    This applies 100% height to all the necessary elements in the footer so all the descendant elements take-on all the usable space possible.

    And the new demo: http://jsfiddle.net/csKtX/2/

    • 0