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

Question

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

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

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

谢谢

Answer 1

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

Answer 2

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

Answer 3

扩展jpillora的出色指导：

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

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

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

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