Изменить размер редактора ajax.org ACE на основе размера браузера

Question

Я хочу, чтобы редактор ACE изменялся по размеру . однако элемент редактора должен быть явно задан для того, чтобы был инициализирован API-интерфейсом редактора туза.

Редактор работает, когда я устанавливаю ширину: 100%/высота: 400 пикселей. Наличие этого параметра позволяет ширине редактора реагировать на ширину браузера. Однако, не реагируя на высоту редактора.

Есть ли способ сделать размер редактора более гибким, ответив на размер браузера?

Благодаря

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'S:

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 - это номера, которые мне нужно использовать для учета всех меню и вкладок, занимающих вертикальное пространство в верхней части моей страницы. Отрегулируйте соответствующим образом.