CODEWITHSUNDEEP
htmlcssjquery-mobile
Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15301

JQuery Mobile content height:100%

I am developing an application with JQuery Mobile.

This is my html code.

My page has a full-screen <iframe> inside. I have set the style width:100%; height:100%; border:0% for my iframe but it gives a height more than the content's height and scrollbar of main page appears.

How do I avoid this problem? (I want exactly height:100% for my iframe)

Upvotes: 5

Views: 7086

Answers (3)

Mahdi Ghiasi
Mahdi Ghiasi

Reputation: 15301

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";
}

Upvotes: 3

hekomobile
hekomobile

Reputation: 1388

@Mahdi try this,

<iframe id="cnt" width="100%" height="100%" frameborder="0" allowfullscreen>Your browser doesn't support iframes.</iframe>

Hope this helps. :)

Upvotes: 1

Jezen Thomas
Jezen Thomas

Reputation: 13800

I'm guessing the browser is setting a little margin and/or padding on the body and/or html.

Try a classic CSS reset.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

Also, you can make sure the scrollbar doesn't appear by doing something like this:

html, body {overflow-y: hidden;}

Upvotes: 1

Related Questions