100％Height Div与jQuery和CSS

Question

我一直在尝试创建一套全页DIV，但在移动平台上却没有成功。 在iOS和Android设备上，第一个DIV会显示正常，但是即使我的边距设置为“ 0”，第二个DIV也会有较高的利润率。

滚动到底部后，第一个DIV的红色仍然可见。

这是我用来复制问题的JavaScript ...

$(document).ready(function() {

    $(window).resize(function() {

        var newHeight = $(window).height();

        $('div').css({
            width: '100%',
            height: newHeight + 'px'
        });

    });

});

CSS ...

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            border: 0;
        }

        div {
            width: 100%;
            height: 100%;
        }

        .red {
            background: red;
        }

        .blue {
            background: blue;
        }

和HTML ...

<div class="red">
</div>

<div class="blue">
</div>

Answer 1

为什么不只使用CSS？

.red, .blue{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Answer 2

我通过将DIV包裹在容器DIV中并将overflow-x设置为隐藏来解决此问题。

新的CSS。

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

div#container {
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.red {
    width: 100%;
    height: 100%;
    background: red;
}

.blue {
    width: 100%;
    height: 100%;
    background: blue;
}

Javascript ...

$(document).ready(function() {
    $(window).resize(function() {
        var winHeight = $(window).height(); winWidth = $(window).width();
        $('fp').css(function(){height : winHeight + " !important", width : winWidth + '!important'});
    });
});

现在，它在移动和桌面浏览器中都可以正常运行。