Question

我的网站底部出现了不需要的白色条纹，这仅适用于移动版Safari iOS访问者。

我正在使用以下代码将页脚区域粘贴到底部：

<div class="page_wrapper">
    <!-- Content here -->
</div>
<div id="footer">
    <div class="footer_sticker">    
        <div class="footer_upper">
            <!-- Content here -->
        </div>
        <div class="footer_lower">
            <!-- Content here -->
        </div>
    </div>
</div>



#footer, .page_wrapper:after {
    height: 275px;
}
.page_wrapper:after {
    content: "";
    display: block;
}
.page_wrapper {
    margin-bottom: -275px;
    min-height: 100%;
}
#footer {
    position: relative;
}
#footer .footer_sticker {
    bottom: 0;
    height: 275px;
    position: absolute;
    width: 100%;
}

Answer 1

过去时代的问题，但今天，当我将视图从纵向方向更改为横向时，遇到了这个问题。所以这是我的解决方案：

我的研究

注意：：从纵向更改为横向时，address-bar是隐藏的，而从纵向更改为纵向时，address-bar会缓慢显示（拆分秒）。 这就是问题！。

您会看到，底部的神奇白色条带与address-bar + mobile top bar

的高度几乎相同

基本上在所有这些魔术发生之前就绘制了CSS height: 100%/100vh，我们在底部得到了令人讨厌的空白白条。

我如何解决

通过延迟计算文档的高度（例如200毫秒），这样我就可以得到所有效果后的最终文档高度，并使用新值设置文档高度。

这就是我的意思：

var timerHandler;
timerHandler = setTimeout(() => {
   document.documentElement.style.height = `${window.innerHeight}px`;
}, 350)

希望它对某人有帮助！

Safari iOS底部神秘的白色条纹

1 个答案: