Css 在safari中Div在ipad上崩溃

我认为这将是最好的任何人想要帮助检查我的网站，看看他或她自己的问题。需要iPad

www.net

如你们所见，我有两个部分，一个顶部部分和一个下部部分，都有100%的高度。 最低部分有4个div，以不同深浅的蓝色作为背景色。现在 在iPad上，也只有在safari中，当我从纵向改为横向或反向时，我的网站最低部分div的背景色会完全混乱或崩溃。 我的猜测是，因为safari在ios 8上有这个新功能，当你向下滚动tabs部分时，它会消失，这实际上会使网站的视口或高度比以前的100%高，也就是说，在它消失之前，现在，如果你点击我的页面，让标签返回，你会发现这是真的

有办法解决这个问题吗

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

编辑： 顺便说一句奇怪的是，我的iphone 6上没有出现这种情况

---

Bowser.

.bl main>部分{height:50vh；}我已经解决了这个问题，我刚才正在四处闲逛。。但还是没有运气。编辑：谢谢代码九，但50vh也不起作用。。颜色仍然消失。bl main中的所有部分都可以具有相同的50vh高度。只需在第三个孩子身上应用顶部：50%，它将在移动Safari和桌面上工作。所以在第三个孩子身上仅应用50%？不，还是不走运，这些浏览器问题太烦人了-

<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>