Set Content Height 100% Jquery Mobile

set content height 100% jquery mobile

Update

I have added a Pure CSS Solution below.

I have noticed that .ui-content div doesn't fill the empty space 100%, it is still missing 2px. Those comes from fixed toolbars header and footer, as they have margin-top: -1px and margin-bottom: -1px respectively. (fiddle)

Sample Image

It wasn't obvious before as both page div and footer have the same black data-theme="b". I have changed .ui-page's background-color: red; to show the difference.

Therefore, to achieve best results, it's necessary to check whether toolbars are fixed. Below is the enhanced solution.

jQM >= 1.3

var screen = $.mobile.getScreenHeight();

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight()  - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

/* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

$(".ui-content").height(content);

jQM <= 1.2

Since fixed toolbars in jQuery Mobile 1.2 and below don't get -1 for top/ bottom, there is no need to do subtract 1px from toolbar's .outerHeight().

var header = $(".ui-header").outerHeight();

var footer = $(".ui-footer").outerHeight();

Demo - w/ fixed toolbars

Demo - w/o fixed toolbars (1)

(1) On Desktop browser page will scroll by 1px; however, On mobile device it doesn't. It's caused by body's height set to 99.9% and .ui-page to 100%.

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

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.

JQuery Mobile content height:100%

Thank you all guys for answers!

Finally, I have found the solution. My solution is a little messy, but its OK.

This is my css:

    html,body{overflow-y:hidden}
    .frame {
        height: 100% ;
        width: 100% ;
        border: 0  ;
        background-color: green ;
    }

    .content {
        height: 100%;
        width: 100%;
        overflow-y: hidden;
    }

    .ui-content {
        margin: 0   !important ;
        padding: 0   !important ;
        border: 0   !important ;
        outline: 0   !important ;
        height: 100%  ;
        overflow: hidden  ;
    }

But if I use JQuery Mobile header, there will be an extra space (almost equal to header size.) Also It could be solved with the Javascript below :

function correctFrameSize() {
    document.getElementById('content').style.height = (window.innerHeight-40)+"px";
}

jquery mobile set my screen size to 100 percent

Crap, my jQuery for the panelMain was missing the freaking hashtag/pound symbol in front. It works now!!!

Jquery Mobile content not filling 100%

Getting 100% height is done by adding :

html, body{height:100%;}
#profile_container{
    min-height:100%;
    width:80%;
    margin-left:auto;
    margin-right:auto;
    border:solid 1px;

}

Edit:

Check the links for more information please.

height: 100% or min-height: 100% for html and body elements?

Fiddle

Jquery mobile 1.4.5 set panel height possible?

Customizing a right or left panel you will need to change 3 CSS classes set by JQM. The animation, the panel, and the inner part of the panel which is were the content is in. An easier way is to create custom overlay box.

Demo
https://jsfiddle.net/bz649m86/

Html

<div class="box"><a class="close">Close</a></div>

CSS

.box {
    position:fixed; // a fixed position is used for the box
    top:0; // placed at the top of the screen
    right:-100%; // with a minus position setting on the right side of the screen so its hidden from view
    background-color: blue;
    width: 100%; //with a width of the whole screen, but it can be any width
    display: block; //displayed in block format
    z-index: 999999; // above the header when in view
    overflow: hidden; // if you don't require scrolling within the box
    height:40px; // the height size required
//the transition settings are not needed but makes the animation of the panel much smoother.
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

Jquery 

// animate on click to bring the box in to view
    $(document).on("click", ".pannel", function () {
        $('.box').animate({
            'right': "0%"
        }, 300);
    })
// and out of view when closed    
    $(document).on("click", ".close", function () {
        $('.box').animate({
            'right': "-100%"
        }, 300);
    })

As a side note, with this method you can have a custom panel (overlayed) displayed anywhere on the screen.

In this demo the box comes from top of the screen

https://jsfiddle.net/Lqxp2ewb/

How to create div with 100% height with jquery mobile?

OK, here is what I have for you. Keep in mind though, if the content of the page is tall at all this might not be very usable. The swipe area is everything below the content. So as the content area gets bigger the swipe area gets smaller.

<!DOCTYPE html> 
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery Swipe</title>

    <link href="jquery-mobile/jquery.mobile-1.0b3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0b3.min.js" type="text/javascript"></script>

    <script src="phonegap.js" type="text/javascript"></script>

    <script>
        $(document).ready(function() {

            // Set the initial window (assuming it will always be #1
            window.now = 1;

            //get an Array of all of the pages and count
            windowMax = $('div[data-role="page"]').length; 

           $('.swipeArea').bind('swipeleft', turnPage);
           $('.swipeArea').bind('swiperight', turnPageBack);
        });

        // Named handlers for binding page turn controls
        function turnPage(){
            // Check to see if we are already at the highest numbers page            
            if (window.now < windowMax) {
                window.now++
                $.mobile.changePage("#device"+window.now, "slide", false, true);
            }
        }

        function turnPageBack(){
            // Check to see if we are already at the lowest numbered page
            if (window.now != 1) {
                window.now--;
                $.mobile.changePage("#device"+window.now, "slide", true, true);
            }
        }
        </script> 

        <style>
            body, div[data-role="page"], div[data-role="content"], .swipeArea {
                height: 100%;
                width: 100%;
            }
    </style>
</head> 
<body> 

<div data-role="page" id="device1"">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content">   
        Content 
        <div class=swipeArea></div>
    </div>

    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device2" style="height: 100%">
    <div data-role="header">
        <h1>Content 2</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div data-role="fieldcontain">
            <label for="slider">Input slider:</label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
        </div>
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device3" style="height: 100%">
    <div data-role="header">
        <h1>Content 3</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

<div data-role="page" id="device4" style="height: 100%">
    <div data-role="header">
        <h1>Content 4</h1>
    </div>
    <div data-role="content" style="height: 100%">  
        Content     
        <div class=swipeArea></div>
    </div>
    <div data-role="footer"  data-position="fixed">
        <h4>Page Footer</h4>
    </div>
</div>

</body>
</html>

jQuery mobile viewport height

Read this: http://jqmtricks.wordpress.com/2014/02/06/content-div-height-fill-page-height/

DEMO

function SetHeightOfDiv() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

    /* content div has padding of 1em = 16px (32px top+bottom). This step
   can be skipped by subtracting 32px from content var directly. */
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;

    $(".ui-content").height(content);
}

You also need to trigger this on window resize and orientationchange:

$(document).on("pageshow", "#home", function () {
    SetHeightOfDiv();
});

$(window).on("resize orientationchange", function () {
    SetHeightOfDiv();
});

jQuery mobile page height

The min-height of the data-role="page" element is set via JavaScript in a resize event handler for the window object. You can create your own JavaScript that resizes the page differently:

$(function () {
    $(window).bind('resize', function (event) {
        var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
            header_height  = $.mobile.activePage.children('[data-role="header"]').height(),
            footer_height  = $.mobile.activePage.children('[data-role="footer"]').height(),
            window_height  = $(this).height();

        if (content_height < (window_height - header_height - footer_height)) {
            $.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
            setTimeout(function () {
                $.mobile.activePage.children('[data-role="footer"]').css('top', 0);
            }, 500);
        }
        event.stopImmediatePropagation();
    }).trigger('resize');
});

Here is a demo: http://jsfiddle.net/sAs5z/1/

Notice the setTimeout used to set the fixed-position-footer; the timeout duration can probably be made smaller. This is used because the jQuery Mobile Framework was re-positioning the fixed-position-footer back to the bottom of the page. An example of this can be seen here: http://jsfiddle.net/sAs5z/

Another note, you may want to only re-position the fixed-position-footer element and leave the page's min-height property the same; this will make the page gradient cover the whole screen but the footer won't have any space between it and the content. Here is a demo of this method: http://jsfiddle.net/sAs5z/2/


Related Topics

Why Does My Image Have Space Underneath

What's the Difference Between ≪B≫ and ≪Strong≫, ≪I≫ and ≪Em≫

Margin-Top Push Outer Div Down

Should Ol/Ul Be Inside ≪P≫ or Outside

Having Links Relative to Root

How to Make a HTML Page in A4 Paper Size Page(S)

How to Create a Checkbox With a Clickable Label

How to Strip HTML Tags from a String in SQL Server

Creating Anchor Tag Inside Anchor Tag

What Does "For" Attribute Do in HTML ≪Label≫ Tag

I Need an Unordered List Without Any Bullets

Get the Value in an Input Text Box

How to Create Your Own HTML Tag in Html5

Base64 Encoded Images in Email Signatures

What Is Doctype

Open Link in New Tab or Window

Adding a Favicon to a Static HTML Page

Invert CSS Font-Color Depending on Background-Color


Leave a reply



Submit