【发布时间】：2018-02-28 21:01:00
【问题描述】：
页面 A 有一个iframe（加载页面 B）。该页面 B 有一个div#OutputDiv。我的目标是使div 在iframe 中可滚动。
解决方案（感谢史蒂夫！）：
- 包括
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 全文
Page A.html - 有一个iframe 来加载Page B。在页面 A 上时，div#OutputDiv 中的 iframe 必须是可滚动的。在 PC 上运行良好，但在 iPad/Android 上无法滚动。页面结构：
页面 B.php - 左半部分 div#OutputDiv，右半部分 div#map-canvas 包含 Google 地图。
（旁注：我认为#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#map-canvas，我必须执行下面的代码，否则当我将鼠标悬停在页面上时，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>
【问题讨论】：
标签： ipad html mobile iframe scrollable