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

回答

相关问题