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

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

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

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

Спасибо

Ответ 1

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

Ответ 2

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