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

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_34391445

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量5k

点赞数 1

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cef5451f265da1b6e65873f

版权

这是一个在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存在一个问题：在低版本Safari，不支持height: calc() 方法，MDN解释。

转载于:https://juejin.im/post/5cef5451f265da1b6e65873f

weixin_34391445

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
safari中高度100%失效问题及解决方案

这是一个在Vue项目中嵌套iframe产生的问题，具体表现为：在Safari浏览器中，页面渲染完成后，拉伸页面宽度，iframe中的内容高度溢出，且无法滚动到溢出部分。chrome、firefox都没有发生这个问题，虽然知道是CSS在Safari中的解析差异引起的，但具体是什么原因，还需要做定位，避免后续同类问题的采坑。vue项目源代码大致如下：<html> <head&...
复制链接

扫一扫