Div 在 Safari 中 ipad 崩溃

Question

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

www.....网

如您所见，我有 2 个部分，一个顶部部分和一个底部部分，高度均为 100%。最下面的部分有 4 div 个不同深浅的蓝色作为背景色。现在.. 在 iPad 上（并且仅在 safari 中）我遇到了这个问题，当我从纵向更改为横向时，我网站的最低部分 div 的背景颜色变得完全混乱或崩溃或相反。我的猜测是，因为 safari 有这个新功能（从 ios 8 开始），当你向下滚动标签部分时，它会消失，这实际上使网站的视口或高度确实高于以前的 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>

Div 在 Safari 中 ipad 崩溃

Div collapses on ipad in safari

css

ipad

ios8

height

mobile-safari