title: make iframe content stay inside div
body: <p>I'm trying to make a tablet app in html.
  I want to have a topbar with some buttons and an area below with a iframe where i can load content in a protected area.</p>
  
  <p>the base of the page is build as this:</p>
  
  <pre><code>&lt;div id="topMenu"&gt;&lt;/div&gt;
  &lt;div id="webdiv"&gt;
    &lt;iframe id="frame"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css is:</p>
  
  <pre><code>#topMenu{
      height: 32pt;
  }
  
  #webdiv{
      height: calc(100% - 32pt);
      width: 100%;
      overflow: ??;
  }
  
  #frame{
      height: 100%;
      width: 100%;
      border: none;
      overflow: ??;
  }
  </code></pre>
  
  <p>so my problem is that i don't know what to put in the overflow attributes (or what ever i need to do).
  I want it so that the content of the iframe can be large, but at no point would move the topbar. meaning that the iframe has a scrollbar of some sort.
  but no matter what i try it either lock everything so no scrolling, or the content is one big so that the topbar is moved outside the window when scrolling down.</p>
  
  <p>any idea what i have done wrong?
  thanks...</p>