title: iframe size to fit in parent div
body: <p>I've got the following html:</p>
  
  <pre><code>    &lt;html&gt;
  &lt;body&gt;
  
  &lt;div id="note1" class="note"&gt;
      &lt;div class="note-header"&gt;Note&lt;/div&gt;
      &lt;div class="note-content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>with css:</p>
  
  <pre><code>body {
      background-color:black
  }
  .note {
      width: 150px;
      height: 150px;
      background: #111111;
  }
  .note h4 {
      text-align: center;
  }
  .note-header {
      background: #0b3e6f;
      color: #f6f6f6;
      font-weight: bold;
  
  }
  .note-content {
      height: 100%;
      width: 100%;
  }
  .note-editor {
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>And javascript that adds iframe to div.note-content:</p>
  
  <pre><code>$(function() {
      $("#note1").resizable().draggable({handle: ".note-header"});
      $('#note1').children('.note-content').append('&lt;iframe id="rte" class="note-editor" &gt;&lt;/iframe&gt;');
      $('#rte').contents().attr("designMode", "on");
  });
  </code></pre>
  
  <p>The problem is that iframe size apears to be bigger then div.note-content size.
  Parent div is resizable. how can i make iframe fit in div.note-content?
  JSFiddle: <a href="http://jsfiddle.net/TTSMb/" rel="nofollow">http://jsfiddle.net/TTSMb/</a></p>