Alex Rivera | Logout

JQuery-Mobile content area 100% height between head and foot

Asked 2011-09-16T14:09:40.880
18

A lot of topics on this... but not getting the point how to do it.

I have my JQM Header and Footer. I want the content area to fill the 100% height in between head and foot.

Thats my code, how is it possible?

<body>
        <div data-role="page" id="entryPage" data-theme="d">

        <div data-role="header" id="header" data-position="fixed" data-theme="d">
            <h1>Page Title</h1>
        </div><!-- /header -->

        <div data-role="content" id="content" data-theme="d">

             <div id="columnwrapper">
                <div id="leftcolumn">
                    <div class="innertube">
                        Point 1
                    </div>
                    <div class="innertube">
                        Point 1
                    </div>
                </div>
            </div>

            <div id="rightcolumn">
                <div class="innertube">
                    <div id="switch1">
                        test
                    </div>
                </div>
                <div class="innertube">
                    test2
                </div>

            </div>

            <div id="contentcolumn">
                <div class="innertube">Content</div>
                <div class="innertube">Content</div>
            </div>

        </div><!-- /content -->
        <div data-role="footer"  id="footer" data-position="fixed" data-theme="d">

            <div id="switch2">
                <a href="#foo" data-role="button" data-icon="arrow-u">Expand main menu</a>
            </div>

        </div><!-- /footer -->
    </div><!-- /page -->
</body>

CSS:

#columnwrapper{
    float: left;
    width: 100%;
    margin-left: -75%;
header jquery-mobile height footer
Edit
Report

1 Answer

3

Thanks, Jasper! That helped me a lot.

I had to mess around a lot to get this to work with multiple headers/footers, and to account for the url bar in ios. I thought I would share my solution for any one else having this issue. This is working for me so far in ios simulator, but I would be eager to hear how it works on other devices.

/* detect device */
var ua = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
    ipad = ~ua.indexOf('iPad'),
    ios = iphone || ipad,
    android = ~ua.indexOf('Android');


$(document).delegate('#the_page', 'pageshow', function () {
    var $page = $(this),
        $target = $(this).find('.fullHeight'),
        t_padding = parseInt($target.css('padding-top'))
                    + parseInt($target.css('padding-bottom')),
        w_height = (ios)? screen.height-65: $(window).height();     // "-65" is to compensate for url bar. Any better ideas?
        headFootHeight = 0;

    // Get total height for all headers and footers on page
    $page.find('[data-role="footer"], [data-role="header"]').each(function() {
        var myTotalHeight = $(this).height()
                            + parseInt( $(this).css('padding-top') )
                            + parseInt( $(this).css('padding-bottom') );
        headFootHeight += myTotalHeight;
    });

    var the_height = (w_height - headFootHeight);           

    $page
     .height(w_height)
     .find('.fullHeight')
     .height(the_height - t_padding);
});

This script is setting a 100% height on '.fullHeight', instead of [data-role=content] to give more flexibility, but you can just add the fullHeight class to your [data-role=content] element.

One issue I'm still having is compensating for the url bar in ios, and finding a window height that works across devices. Any ideas on that?

answered 2012-02-05T15:05:12.173

Your Answer