src 元素 100vh 的 iframe iOS 问题
Posted
技术标签:
【中文标题】src 元素 100vh 的 iframe iOS 问题【英文标题】:iframe iOS problems with src element 100vh 【发布时间】:2016-06-09 23:49:44 【问题描述】:我有一个正在输出网站的 iframe。 src网站使用100vh的大英雄来计算高度。在 iframe 中,除了 ios 设备外,一切都很好。似乎英雄的 100vh 正在将 iframe 页面的整个高度拉伸到其他元素上,而不仅仅是当前视口。
<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 网站的 hero 部分会拉伸 iframe 的整个高度
HTML
<section class="hero">
</section>
CSS
background-size: cover !important;
background-position: center center !important;
position: relative;
height: 100vh;
这个问题似乎只存在于 iOS 中,在其他所有设备上都很好。
任何帮助都会很棒!
【问题讨论】:
【参考方案1】:据我所知,Safari 在 iOS 6 - 7 渲染元素上存在问题,在 CSS 中设置了 height: 100vh。
【讨论】:
我使用的是 iOS 9,但问题仍然存在。不过谢谢! 这是一种解决方法,但是您可以通过媒体查询规则将 iframe 属性更改为:html, body height:100%;
.wrapper iframe position:absolute;top:0;left:0;width:100%; height:100%;
via,[链接]:***.com/questions/23027068/…
3 年后仍然是一个问题。在 iOS 上的 iframe 中,vh
不是基于 iframe 的视口高度,而是基于 iframe 内所有内容的高度。这对我使用 vh
造成了重大限制,并且在嵌入 iOS 时完全破坏了 vh
的实现。以上是关于src 元素 100vh 的 iframe iOS 问题的主要内容,如果未能解决你的问题,请参考以下文章
即使父元素的高度设置为“100vh”,子元素也不包含在视口高度中[重复]
HTML,VUE,嵌入iframe,实现iframe的100%高度和宽度,代码分享
移动 safari 和 iOS 11:导航栏重叠的 Web 应用程序和全高 (100vh)