iframe與src元素的iOS問題100vh

我有一個輸出網站的iframe。 src網站使用100vh的大型英雄來計算身高。 iframe內部時，除iOS設備之外，一切工作都很好。看來英雄的100vh將iframe頁面的整個高度延伸到其他元素上，而不僅僅是當前的視口。iframe與src元素的iOS問題100vh

HTML

<div class="wrapper"> 
    <iframe src="[website url]"></iframe> 
</div>

CSS

.wrapper{ 
    height: 100%; 
    position: relative; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch; 
    } 


.wrapper iframe{ 
    display: block; 
    width: 100vw; 
    height: 100vh; 
    max-width: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0 none; 
    box-sizing: border-box; 
} 

body { margin:0 }

的問題是，在iOS上，從SRC網站英雄節將伸展的iframe

HTML

的整個高度

<section class="hero"> 
</section>

CSS

background-size: cover !important; 
background-position: center center !important; 
position: relative; 
height: 100vh;

這個問題似乎只存在於iOS，在其他任何設備上都沒有問題。

任何幫助將是偉大的！

來源

2016-02-26 scopeak

對於我所知道的Safari瀏覽器在iOS 6-7渲染元素中存在高度爲100vh的CSS設置問題。

來源

2016-02-26 17:00:39 Renato

我使用的是iOS 9，問題仍然存在。雖然謝謝！ – scopeak

這是一個解決方法，但是，您可以通過媒體查詢規則將iframe屬性更改爲如下內容： 'html，body {height：100％;}' '.wrapper iframe {position：absolute; top：0; left ：0;寬度：100％;高度：100％;}' via， [link]：http://stackoverflow.com/questions/23027068/how-to-set-the-iframe-height-width-to-100 – Renato

iframe與src元素的iOS問題100vh

回答

相關問題