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

Question

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%; /*Set left margin to -(contentcolumnWidth)*/
    background-color: #C8FC98;

}

#leftcolumn{
    margin: 0 40px 0 75%; /*Set margin to 0 (rightcolumnWidth) 0 (contentcolumnWidth)*/
    background: #C8FC98;
}

#rightcolumn{
    float: left;
    width: 40px; /*Width of right column*/
    margin-left: -40px; /*Set left margin to -(RightColumnWidth)*/
    background: yellowgreen;
}

#contentcolumn{
    float: left;
    width: 75%; /*Width of content column*/
    background-color: blue;
}

.innertube{
    margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;

}

Actually the inner area only fills the height depending on the content... means 2 divs 2 rows, but not 100%..

Thanks

dont use jquery css, it is no good, you need your own footer that set to position fixed, overflow;auto, and bottom:0 and then one for your head will paste code in a min — davethecoder, Sep 16 '11 at 16:34

Jasper · Accepted Answer · 2014-02-09T19:47:19.410

10

The CSS position: fixed doesn't work correctly in mobile browsers. My experience is with Android and iOS browsers and none of them impliment position: fixed properly (the exception is the iOS 5 browser but it's still in beta).

Rather than fixing an element to the screen and not moving it when the user scrolls in mobile browsers it tends to be treated like position: absolute and it moves when the page scrolls.

Also using the CSS overflow property won't allow scrolling on most mobile devices (iOS supports it but the user has to know to use two fingers while scrolling in a scrollable-div).

You can however use CSS but be aware you will need to use position: absolute or you can use JavaScript to set the heights on the elements.

Here is a jQuery Mobile solution using JavaScript to set the heights of the pseudo-page elements:

$(document).delegate('#page_name', 'pageshow', function () {
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height());
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height);
});

To get a flawless finish you need to take into consideration the behavior of the target device's address bar because if you want a fullscreen webpage then you have to add the height of the address bar to the height of the page.

edited Feb 09 '14 at 19:47

answered Sep 16 '11 at 19:33

Jasper

75,717
14
151
146

7

its currently doing a little bit too much, the footer is always below the visible area.. do you know why? – dotchuZ Sep 19 '11 at 10:27
It seems to ignore the status bar, if you also rest the height of the android status bar it seems about right – Daniel Aug 23 '13 at 09:02
1

@zyrex toolbars `outerHeight()` should be consider in addition to current _content_ div height. http://stackoverflow.com/a/21553307/1771795 – Omar Feb 04 '14 at 14:36
@jasper, have you ever tested your code? i tried your code, but it crashes. After thinking quite a while I found setting height isn't written correctly. E.g. $(this).find('[data-role="header"]').height() should be $($(this).find('[data-role="header"]')).height(). – Franva Feb 09 '14 at 12:49
@Franva Your update doesn't make much sense to me, you're taking what is already a jQuery object and making another one from it. There shouldn't be any usefulness to that. I did however notice that my code was missing a trailing parenthesis and semi-colon. So if you simply copied and pasted you probably got a parse error due to that. – Jasper Feb 09 '14 at 19:48

eschwartz · Answer 2 · 2012-02-05T15:15:24.307

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?

@geekay_gk - Will this also automatically set the height of the content when I use a web browser? Because in my case, the entire page has a scroll bar, and what I need is a FullScreen Google Maps inside the content div. It's really hard, working with mobile apps when I don't have my own. — JetPro, Aug 21 '12 at 09:51
I have tried it in my Android emulator. It doesnot really fit my screen resolution. Help? — JetPro, Aug 21 '12 at 10:01

score 1 · Answer 3 · answered Sep 16 '11 at 16:38

the CSS:

footer {
            display: block;
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            height: 50px;
            background-color: #333;
            overflow: hidden;
            z-index:1000;
            -webkit-transform: translateZ(0);
            opacity:.9;
        }

    header{
        display:block;
        position: fixed;
        left:0;
        right:0;
        top:0;
        height:50px;
        overflow: hidden;
    }

    section{
        display:block;
        position:fixed;
        left:0;
        top:50px;
        bottom:50px;
        right:0;
        overflow-y: auto;
    }

    nav{
        display:block;
        height:100%;
        -webkit-backface-visibility: hidden;
    }

    .body{
        overflow-y: hidden;
    }
    .bar {
border: 1px solid       #2A2A2A;
background:             #111111;
color:                  #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#111)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #3c3c3c, #111); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient(top, #3c3c3c, #111); /* FF3.6 */
background-image:     -ms-linear-gradient(top, #3c3c3c, #111); /* IE10 */
background-image:      -o-linear-gradient(top, #3c3c3c, #111); /* Opera 11.10+ */
background-image:         linear-gradient(top, #3c3c3c, #111);
  }

the only html needed:

  <header class="bar" id="AllHead"></header>

  <div data-role="content" class="content" id="home"><section><nav></nav></section></div><!-- /content -->

  <footer class="bar" id="allFoot"></footer>

 </div><!-- /page -->

you can then set whatever items you want inside the footer and the bottom nav bar this will always look right, no matter what happens, also this wont flash on and off everytime you touch something. hope it helps

arg, this is not working on safari (ipad) ... you can't scroll anymore, know some help? thanks — dotchuZ, Sep 19 '11 at 07:12

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

3 Answers3

Linked