在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

回答