title: How to get the ace editor to adjust to its parent div
body: <p>I have the ace div inside another div and I would like the ace editor to adjust it's width and height to the parent div. I call editor.resize() but nothing happens.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" style="height: 100%"&gt;
  &lt;head&gt;
  &lt;title&gt;ACE in Action&lt;/title&gt;
  &lt;style type="text/css" media="screen"&gt;
      #editor { 
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          height: 100px;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body style="height: 100%"&gt;
  &lt;div style="background-color: red; height: 100%; width: 100%;"&gt;
  &lt;div id="editor"&gt;function foo(items) {
      var x = "All this is syntax highlighted";
      return x;
  }&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script&gt;
      var editor = ace.edit("editor");
      editor.setTheme("ace/theme/monokai");
      editor.getSession().setMode("ace/mode/javascript");
  
      editor.resize();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>