嵌入式Google雲端硬盤內容在iOS設備上自己的容器外部擴展設備

Question

我正在使用MaterialiseCss。 我有一個可摺疊的<ul>元素，其中包含一些元素，允許用戶訪問Google雲端硬盤帳戶的文件夾。 我在這裏插入了一個示例摺疊元素，它指向一個空文件夾。 我可以在諾基亞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

您似乎在試圖顯示可能不適用於公開展示該文件。如果您嘗試通過粘貼URL來連接鏈接，您會發現它並沒有顯示任何內容。

我從谷歌驅動添加了我自己的文件，它顯示..所以你所要做的就是從谷歌驅動器獲得適當的鏈接爲您的文件。

編輯 但如果你不想讓你的iframe來投奔您所定義的400像素，則只需添加一個溢出-Y：隱藏。

.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>