Question

页面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全文

页面A.html - 要iframe加载页面B 。在页面A上时，div#OutputDiv中的iframe必须可滚动。适用于PC但在iPad / Android上无法滚动。页面结构：

Page B.php - 包含Google地图的左半部div#OutputDiv，右半部div#map-canvas。

（旁注：我认为#map-canvas CSS是不可更改的，例如更改某些内容可能会导致地图的高度超出浏览器高度，这不是我想要的。） < / p>

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

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

Answer 1

我无法看到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?

使IFRAME中的DIV可滚动

1 个答案: