在IFRAME中滾動DIV

頁面A有一個iframe（加載頁面B）。該頁面B有一個div#OutputDiv。我的目標是使那div在iframe可滾動。在IFRAME中滾動DIV

SOLUTION（信貸史蒂夫！）：

包括overflow: auto爲div。但是，您也必須指定height。簡單地給任何固定的價值。例如height: 0。

使用JavaScript函數使div的height始終與窗口相同，即使在調整窗口大小後也是如此。 height現在不固定。

代碼：

#outputDiv { 
    font-size: 12px; 
    font-family: Arial; 
    margin-right: 1em; 
    overflow: auto; 
    overflow-x: hidden; (optional) 
    -webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile) 
    height: 0; (omit-able) 
} 

$(window).resize(function(){ 
    $("#outputDiv").css("height",0).css("height",$(this).height()); 
}); 
$(window).trigger("resize");

TL; DR全文

頁A.html - 有iframe加載網頁B。在頁面A上時，該iframe中的那個div#OutputDiv必須是可滾動的。在PC上運行良好，但不能在iPad/Android上滾動。頁面結構：

Page B.php - 左半部分div#OutputDiv，右半部分div#map-canvas包含谷歌地圖。

（旁註：我覺得#map-canvas CSS是相當不變，例如改變的東西可能會導致地圖延伸的高度超出瀏覽器的高度，這是不是我想要的）

頁A.html

<style type="text/css"> 
    #title-banner { 
     position: fixed; 
     top: 0; 
     left: 0; 
     width: 100%; 
    } 

    #real-time-alert { 
     margin-top: 155px; 
     margin-left: 10px; 
    } 

    .tab-content { 
     border-left: 1px solid #ddd; 
     padding: 10px; 
     height: 100%; 
    } 

    #map { 
     height: 100%; 
    } 

    .nav-tabs { 
     margin-bottom: 0; 
    } 

    #panel { 
     position: fixed; 
     top: 120px; 
     right: 10px; 
     bottom: 10px; 
     left: 350px; 
    } 

    iframe { 
     width: 100%; 
     height: 100%; 
    } 
</style> 

<body> 
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div> 
<div id="real-time-alert"> 
    DEMO:<br> 
    <a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a> 
</div> 

<div id="panel"> 
    <ul class="nav nav-tabs" id="myTab"> 
     <li class="active"><a data-toggle="tab" href="#map">Map</a></li> 
     <li><a data-toggle="tab" href="#message">Messages</a></li> 
    </ul> 

    <div class="tab-content"> 
     <div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div> 
     <div class="tab-pane" id="message"></div> 
    </div> 
</div> 
</body>

頁B.php *爲DIV＃地圖的畫布，我不得不這樣做下面的代碼，否則當我將鼠標懸停在頁面上，DIV＃OutputDiv就會消失。這可能並不重要。

$("*").hover(function(){ 
    $("#map-canvas").css("position","fixed"); });

<style> 
html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #map-canvas { 
      height: 100%; 
      width: 50%; 
     } 
     #content-pane { 
      float:left; 
      width:48%; 
      padding-left: 2%; 
     } 
     #outputDiv { 
      font-size: 12px; 
      font-family: Arial; 
      margin-right: 1em; 
     } 
</style> 

<body> 
    <div id="content-pane"> 
     <div class='well well-small' id="inputs" style="margin: 1em 1em 0 0"> 
      <b>TESTING ONLY</b> <br> 
      <label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" /> 
      <input type="text" id="originLng" style="width:6em;" /> 
      <button type="button">Calculate distances</button> 
      </br>eg. 3.126547,101.657825 
     </div> 
     <div id="outputDiv"></div> 
    </div> 
    <div id="map-canvas" style="position: fixed; right: 1px;"></div> 
</body>

來源

2013-11-21 jasonlcy91

我看不到在CSS中指定的任何溢出控制（道歉，如果我錯過了它們）。

你試過：

div#OutputDiv { overflow: auto; height: 200px; }

高度是隻是爲了測試目的 - 但是你可以使用JavaScript來獲得實際的高度，並使用兩種原料JavaScript或jQuery的應用它。

How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?

來源

2013-11-21 17:18:00 steve

都能跟得上史蒂夫：

一個很好的例子（包括如何在設備進入縱向到橫向或類似的檢測取向的變化）上可以找到。我已經嘗試過，但仍然沒有工作.. – jasonlcy91

我也嘗試過這一點，但如果我沒有弄錯，它會延長頁面B所以所有內容都適合，而不是使iframe內的內容滾動而不更改iframe的大小......並且它使頁面很長，因爲谷歌地圖很大：

在IFRAME中滾動DIV

回答