主块的动态高度

Question

在页面上，有3个块（页眉，主页和页脚）。默认情况下隐藏第4个（apple_ios_status_bar_background）并在代码中动态显示（或隐藏）。未显示此单位时，您可以在页面上看到所有3个块。如果显示第4块 - 块页脚下移页面。有必要阻止main动态改变其高度（所有块应始终在页面上可见）。

代码https://jsfiddle.net/j3qm5qgx/1/

在JS检测iOS系统中，如果为true - 显示apple_ios_status_bar_background阻止，则隐藏为false。

Answer 1

在你的小提琴中，你没有包含jQuery，第二个你没有定义iOS。如果你这样做，它可以按你的意愿工作。

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);

https://jsfiddle.net/j3qm5qgx/4/

请注意，Safari并不真正意味着iOS，您可以使用媒体设备在css中解决该问题。

如果你不希望你的页脚离屏，你可以通过css将它设置在底部：

footer {
    position: absolute;
    bottom: 0px;
    height: 20px;
    width: 100%;
    background-color: #dff0d8;
}

https://jsfiddle.net/j3qm5qgx/5/

另一种方法是通过jquery来改变它，因为main现在更短20个像素：

if (iOS) {
    $("#apple_ios_status_bar_background").show();
    $('main')[0].style.height = 'calc(100% - (40px + 20px + 20px))';
} else {
    $("#apple_ios_status_bar_background").hide();
}

https://jsfiddle.net/j3qm5qgx/6/