JQuery Mobile内容高度:100%

Question

我正在使用JQuery Mobile开发一个应用程序.

这是我的HTML代码.

我的页面<iframe>里面有一个全屏.我width:100%; height:100%; border:0%为我设置了样式,iframe但它的高度超过了内容的高度和主页面的滚动条.

我该如何避免这个问题？(我完全想要height:100%我的iframe)

Answer 1

谢谢大家的解答！

最后，我找到了解决方案。我的解决方案有点乱，但还可以。

这是我的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";
}