根据浏览器的大小调整 ajax.org ACE 编辑器的大小答案

【问题标题】：Resize ajax.org ACE editor based on browser's size根据浏览器的大小调整 ajax.org ACE 编辑器的大小
【发布时间】：2012-04-25 10:58:20
【问题描述】：

我想让 ACE 编辑器根据浏览器的大小调整大小尺寸。但是，必须明确调整编辑器元素的大小，以便由 ace 编辑器的 API 初始化。

当我设置宽度：100%/高度：400px 时编辑器工作。具有此设置允许编辑器的宽度响应浏览器的宽度。但是，对编辑器的身高没有反应。

有没有办法通过响应浏览器的大小来使编辑器的大小更加灵活？

谢谢

【问题讨论】：

标签： ace-editor

【解决方案1】：

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

【讨论】：

【解决方案2】：

设置position:absolute;top:0; bottom:0 喜欢https://github.com/ajaxorg/ace-builds/blob/master/editor.html#L14

【讨论】：

【解决方案3】：

扩展 jpillora 的出色指导：

function resizeAce() {
    var h = window.innerHeight;
    if (h > 360) {
        $('#editor').css('height', (h - 290).toString() + 'px');
    }
};
$(window).on('resize', function () {
    resizeAce();
});
resizeAce();

window.innerHeight 受 IE8+ 支持，对于获取屏幕的可用区域似乎很可靠。我最终在 IE9、FF 和 Chrome 上得到了相同的结果。我还发现我必须使用 jQuery on 语法才能可靠地捕获窗口调整大小事件。

我需要使用 jQuery css，因为在我的情况下，我正在调整位于代码编辑器右侧的 pre 元素（显示编码帮助）的大小，这是获得这两个元素的唯一方法元素的高度完全相同。

360 和 290 是我需要用来说明占据页面顶部垂直空间的所有菜单和选项卡的数字。相应调整。

【讨论】：