CODEWITHSUNDEEP
jquerycssjquery-mobile
blue-sky
blue-sky

Reputation: 53916

Unable to set height as a percentage

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>

Upvotes: 2

Views: 3927

Answers (4)

luchopintado
luchopintado

Reputation: 939

Add display: block property, maybe this can help you

Upvotes: 0

Dylan Snel
Dylan Snel

Reputation: 700

Is it possible that it won't work on an anchor element <a>, because it seems that you are quoting that, my advise would be to make a <div> and set that to the correct height.

I hope this helped..

Upvotes: 0

Jasper
Jasper

Reputation: 76003

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/

Upvotes: 2

Blazemonger
Blazemonger

Reputation: 92983

You need to first set

html, body {
    height: 100%;
}

This will allow you to set percentage heights on any elements that are direct children of body.

http://jsfiddle.net/mblase75/w7mMZ/

Upvotes: 3

Related Questions