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解釋。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。