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

时间 2019-11-07

标签 safari 高度 100% 失效问题解决方案繁體版

原文原文链接

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

chrome、firefox都没有发生这个问题，虽然知道是CSS在Safari中的解析差别引发的，但具体是什么缘由，还须要作定位，避免后续同类问题的采坑。vue

vue项目源代码大体以下：chrome

<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(内容高度)。bash

chrome会自动弥补这个问题，可是Safari会认为这是一个缺陷，iframe的父级没有给定的高度，直接致使iframe高度塌陷（随内容高度）。因此在拉伸浏览器窗口的时候，iframe内容实际高度产生了变化，致使该问题的出现。app

解决方案：flex

1. 给定父级指定高度spa

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

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

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

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

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