Making DIV in an IFRAME scrollable

Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.

SOLUTION (CREDIT TO STEVE!):

Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.

Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.

Code:

#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 Full story

Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:

Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.

(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)

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 *for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.

$("*").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>

Solution

I can't see any overflow controls specified in the CSS (apologies if I missed them).

Have you tried:

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

The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.

A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:

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