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上崩溃

1 个答案: