嵌入式 Google 驱动器内容在 iOS 台设备上扩展到自己的容器之外

Question

我正在使用 MaterializeCss。我有一个可折叠的 <ul> 元素，其中包含一些 <iframe> 允许用户访问 Google 云端硬盘帐户的文件夹。我在这里插入了一个示例可折叠元素，它指向一个空文件夹。我可以在 Nokia Lumia 和 Android、iPad 3、iPad 2、iPhone 6（当然还有台式机）的三星设备上测试我的项目。

Css 规则 .gDrive-page {width:100%} 运行良好，iframe 适合容器宽度。这在桌面（IE、Firefox、Opera、Chrome）、诺基亚 Lumia 和三星设备上运行良好，但在 iOS 设备上它扩展到自己的容器之外。

我不明白为什么它没有正确显示。

.gDrive-page{
  width: 100%;
  height: 100%;
 }
.collapsible-body{
   height: 400px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
     <div class="col s12">
       <ul class="collapsible">
          <li>
           <div class="collapsible-header">Regolamento e Varie</div>
           <div class="collapsible-body"> 
            <iframe class="gDrive-page" src="//drive.google.com/embeddedfolderview?id=0B-4aXfTpOgrOSERiVmdXczY3OWM&usp=sharing#list"></iframe>
            </div>
          </li>
       </ul>
  </div>
</div>

Screenshoot

Answer 1

您尝试显示的文件似乎无法用于 public 显示。如果您尝试通过粘贴 URL 转到 link，您会发现它什么也没显示。

我从 google 驱动器添加了我自己的文件，它显示..所以你所要做的就是从 google 驱动器为你的文件获取正确的 link。

编辑但是，如果您不希望 iframe 超过您定义的 400px，则只需添加一个 overflow-y: hidden。

.gDrive-page{
  width: 100%;
  height: 100%;
  overflow-y: hidden; /*Added this line*/
 }
.collapsible-body{
   height: 400px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
     <div class="col s12">
       <ul class="collapsible">
          <li>
           <div class="collapsible-header">Regolamento e Varie</div>
           <div class="collapsible-body"> 
              <iframe class="gDrive-page" src="https://drive.google.com/file/d/0B9zfU_nDqD_IOUxyVktlSHRWc1k/preview"></iframe>
            </div>
          </li>
       </ul>
  </div>

嵌入式 Google 驱动器内容在 iOS 台设备上扩展到自己的容器之外

Embedded Google Drive content extend outside own container on iOS Devices

html

css

materialize