Geek asks and answers

JQuery Mobile Content Height: 100%

I am developing an application using jQuery Mobile.

This is my html code.

My page has full screen <iframe>inside. I set the style width:100%; height:100%; border:0%for mine iframe, but it gives a height greater than the height of the content, and the scroll bar of the main page appears.

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

+5
source share
3 answers

Thanks to all the guys for the answers!

Finally, I found a solution. My solution is a bit 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  ;
    }

JQuery Mobile, ( ). Javascript :

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

, / body / html.

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

, , , - :

html, body {overflow-y: hidden;}
+1

@Mahdi try this,

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

Hope this helps. :)

+1
source

More articles:


All Articles