title: TinyMCE 4 and 100% Height Within Containing Element
body: <p>I am in the process of migrating from TinyMCE 3 to 4.</p>
  
  <p>However, I am getting stuck at making TinyMCE fill its 100% height container (it does work with TinyMCE 3).</p>
  
  <p>Please note this fiddle: <a href="http://jsfiddle.net/MLJaN/" rel="noreferrer">http://jsfiddle.net/MLJaN/</a></p>
  
  <p>I used the CSS below to try and set the iframe and all of its parents to 100%-height. I agree it does not look ideal, but I would have thought it should work this way.</p>
  
  <pre><code> body, html, .mce-tinymce, .mce-edit-area.mce-container, iframe, .mce-container-body.mce-stack-layout
   {
       height: 100% !important;
   }
  </code></pre>
  
  <p>As you can see in the live-fiddle, it is exactly the amount of pixels of the toolbar "too tall": i.e. it is 34px too tall (the toolbar's height).</p>
  
  <p>This works, but it does not automatically resize with the browser and it uses calc() which is only about 79% supported right now: <a href="http://jsfiddle.net/MLJaN/2/" rel="noreferrer">http://jsfiddle.net/MLJaN/2/</a></p>
  
  <p>Now, I am looking for a pure CSS (no calc() function) solution to make the entire editor fill its container and be fluidly resizable.</p>
  
  <p>Any pointers would be much appreciated.</p>