css - 在 Safari 中，Div 在 iPad 上崩溃

Question

我认为这对任何想要帮助检查我的网站并为他或她自己解决问题的人来说是最好的。 (需要 iPad...)

www.....网

如您所见，我有 2 个部分，一个顶部部分和一个底部部分，高度均为 100%。最低部分有 4 个 div，背景颜色为不同深浅的蓝色。现在..在 iPad 上(并且仅在 safari 中)我遇到了这个问题，当我从纵向变为横向或反向时，我网站的最低部分 div 的背景颜色完全困惑或崩溃。我的猜测是，因为 safari 有这个新功能(从 ios 8 开始)，当你向下滚动时选项卡部分消失，这实际上使网站的视口(viewport)或高度真的高于以前足够的 100%，即，在它消失之前，现在如果你在我的页面一直向下(通过点击它)让标签回来，你会发现这是真的..

有什么办法可以解决这个问题吗？

如果您需要此处的代码，请询问，但我认为您最好先自己检查一下。因为我不知道从哪里开始。

编辑:(顺便说一句......很奇怪，这不会发生在我的 iPhone 6 上......)

鲍泽。

Answer 1

<div id="bl-main" class="bl-main">
    <section>
        <a href="http://www.blog.elliotwagner.net">
            <div class="bl-box">
                <h2 class="bl-icon bl-icon-about">Blog</h2>
            </div>
        </a>

    </section>
    <section id="bl-work-section">
        <a href="about.html">
            <div class="bl-box">
                <h2 class="bl-icon bl-icon-works">Résumé</h2>
            </div>
        </a>

    </section>

        <!-- For this section you need to set the top to be 50% not -50% -->



            .bl-main > section:nth-child(3) {
              top: 50%;
              left: 0;
              background: #5071B8;
            }

    <section>
        <a href="books.html">
            <div class="bl-box">
                <h2 class="bl-icon bl-icon-blog">Books</h2>
            </div>
        </a>


    </section>
    <section>
        <a href="about.html">
            <div class="bl-box">
                <h2 class="bl-icon bl-icon-contact">About</h2>
            </div>
        </a>
    </section>
    <div style="clear: both;">&nbsp;</div>
</div>