title: Div inside IFrame is not taking the given height
body: <p>We are using an IFrame which works fine when viewed in all browsers.However when viewed in <strong>IPad</strong> the <strong>content of div inside IFrame Overflows below</strong>.
  Refering to the link <a href="https://stackoverflow.com/questions/10528760/iframe-content-is-displaying-outside-the-iframe-on-ios">IFrame in IOS</a>, The solution given over here shown <a href="http://jsfiddle.net/RQBra/29/" rel="nofollow noreferrer">fiddle</a> gives the adds a wrapper</p>
  
  <pre><code> #wrapper {
      position:relative;
      z-index:1;
      width:400px;
      height:400px;
      overflow:scroll;
  }
  </code></pre>
  
  <p>to parent div of IFrame. But the div inside IFrame still Overflow below</p>
  
  <p>The image below shows scroll bar coming inside div of iframe when viewed in the browsers.
  <img src="https://i.stack.imgur.com/gxrKy.png" alt="Working fine in system Browser"></p>
  
  <p>Viewed in IPad
  <img src="https://i.stack.imgur.com/49dxa.png" alt="Problem in ipad"></p>
  
  <p>Any Suggestion would be appreciated.</p>