阅读 756

safari中高度100%失效问题及解决方案

这是一个在Vue项目中嵌套iframe产生的问题,具体表现为:在Safari浏览器中,页面渲染完成后,拉伸页面宽度,iframe中的内容高度溢出,且无法滚动到溢出部分。

chrome、firefox都没有发生这个问题,虽然知道是CSS在Safari中的解析差异引起的,但具体是什么原因,还需要做定位,避免后续同类问题的采坑。

vue项目源代码大致如下:

<html>
    <head>
        <style>
            .app { width: 100%;height: 100%;display: flex;flex: 1;flex-direction: column; }
            header { width: 100%;height: 75px; }
            main { flex: 1; }
            iframe { width: 100%;height: 100%;}
        </style>
    </head>
    <body>
        <div class="app">
            <header></header>
            <main>
                <iframe v-if="true"></iframe>                <div v-else></div>
            </main>
        </div>
    </body>
<html>复制代码

上面代码乍看没啥问题,可以在chrome中完美执行,但其实踩了spec的一个坑

大体意思是,具有百分比高度的元素的父级必须具有已定义的高度,并且必须具有height属性.否则,具有百分比高度的元素必须默认为height:auto(内容高度)。

chrome会自动弥补这个问题,但是Safari会认为这是一个缺陷,iframe的父级没有给定的高度,直接导致iframe高度塌陷(随内容高度)。所以在拉伸浏览器窗口的时候,iframe内容实际高度产生了变化,导致该问题的出现。

解决方案:

1. 给定父级指定高度

main { flex: 1;height: calc(100% - 75px); }复制代码

2. 直接给iframe子级指定高度

iframe { width: 100%; height: calc(100vh - 75px); }复制代码

这里不用100% - 75px,是因为100%依赖于父级指定高度,而vh是直接已浏览器可是窗口高度为基准的。

但是解决方案1、2(之前漏写,感谢评价指出错误)存在一个问题:在低版本Safari,不支持height: calc() 方法,MDN解释