Question

我已使用iframe将Google日历嵌入网站中。在浏览器上，所有功能都可以完美调整大小，但是在iPhone上，当从垂直方向旋转到水平方向然后再回到垂直方向时，嵌入式日历在垂直方向上会溢出iframe。因为它是CMS，所以我只能在此站点上访问HTML和CSS。

HTML如下：

<p class="iframe-container"><iframe allowfullscreen="" frameborder="0" src="https://calendar.google.com/calendar/embed?" width="100%"> . </iframe></p>

CSS如下：

.iframe-container {
width: 100%;
overflow: hidden;
padding-top: 100%;
position: relative;

}

.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Answer 1

经过数周的观察，我通过反复试验找到了解决方案，但不知道为什么现在可以使用。仍然想听听有经验的人为什么可以解决此问题。

HTML如下：

<div class="googleCalendar"><iframe frameborder="0" src="https://calendar.google.com/calendar/embed?"></iframe></div>

CSS如下：

.googleCalendar{
position: relative;
height: 0;
width: 100%
overflow: hidden;
padding-bottom: 100%;
}

.googleCalendar iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
padding-bottom: 100%;
}

在iOS中旋转后，带有嵌入式Google日历的iFrame会溢出

1 个答案: