时间戳

首页 > 解决方案 > 带有嵌入式 Google 日历的 iFrame 在 iOS 中旋转后溢出

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

问题描述

我使用 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%;
}

标签： htmlcss

解决方案

经过数周的寻找，我通过反复试验找到了解决方案，但不知道为什么它现在可以工作。仍然希望从有经验的人那里听到为什么这可以解决问题。

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%;
}

推荐阅读