Resize ajax.org ACE editor based on browser's size

Question

I want to let the ACE editor to be resizable based on the browser's size. however, the editor element must be explicitly sized in order to be initialized by the ace editor's API.

The editor works when I set the width:100%/height:400px. Having this setting allows the editor 's width responsive to the browser's width. However, not responsive for the editor's height.

Is there a way to make the editor's size more flexible by responding to browser's size?

Thanks

Answer 1

function resizeAce() {
  return $('#editor').height($(window).height());
};
//listen for changes
$(window).resize(resizeAce);
//set initially
resizeAce();

Answer 2

set position:absolute;top:0; bottom:0 like https://github.com/ajaxorg/ace-builds/blob/master/editor.html#L14