JQuery Mobile 콘텐츠 높이 : 100 %

JQuery Mobile을 사용하여 응용 프로그램을 개발 중입니다.JQuery Mobile 콘텐츠 높이 : 100 %

This은 내 html 코드입니다.

내 페이지에는 전체 화면 이 있습니다. 스타일 width:100%; height:100%; border:0%을 내 iframe으로 설정했지만 콘텐츠의 높이보다 높이를주고 메인 페이지의 스크롤바가 나타납니다.

이 문제를 어떻게 피할 수 있습니까? 나는 브라우저가 body 및/또는 html에 약간의 여백 및/또는 패딩을 설정하는 것입니다 추측하고있어

출처

2012-07-21 Mahdi Ghiasi

답해 주셔서 감사합니다.

마지막으로 해결책을 찾았습니다. 내 솔루션은 약간 지저분하지만 OK입니다.

이

내 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와 모바일 헤더를 사용하는 경우, 또한 그것은 아래의 자바 스크립트로 해결 될 수있다 (크기 헤더 거의 동일.) 여분의 공간이 될 것입니다 :

를

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

출처

2012-07-22 11:00:40

(I 정확히 height:100% 내 iframe에 대한 원하는).

는 스크롤이 같은 수행하여 나타나지 않도록 할 수 있습니다, 또한 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: "" ""; 
}

보십시오 :

html, body {overflow-y: hidden;}

출처

2012-07-21 22:08:00

죄송합니다. 말씀하신 내용을 이해하지 못했습니다. –

수정 사항을 확인하십시오. –

이 코드를 내 HTML에 추가했지만 아무 것도 변경되지 않았습니다. 나는 그들에게'! important'을 사용해야합니까? –

이 시도 @Mahdi을

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

희망이 도움이됩니다. :)

출처

2012-07-22 00:16:11 hekomobile

JQuery Mobile 콘텐츠 높이 : 100 %

답변

관련 문제