Redimensionar ajax.org Editor de ACE basado en el tamaño del navegador

Question

Quiero permitir que el editor de ACE pueda redimensionarse según el tamaño del del navegador. sin embargo, el elemento editor debe tener un tamaño explícito para que se inicie con la API del editor ace.

El editor funciona cuando configuro el ancho: 100%/alto: 400px. Tener esta configuración permite que el ancho del editor responda al ancho del navegador. Sin embargo, no responde por la altura del editor.

¿Hay alguna manera de flexibilizar el tamaño del editor respondiendo al tamaño del navegador?

Gracias

Answer 1

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

Answer 2

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

Answer 3

Ampliando excelente orientación de 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 es apoyado por IE8 + y parece fiable para conseguir la superficie útil de la pantalla . Terminé con resultados idénticos en IE9, FF y Chrome. También encontré que tenía que usar la sintaxis de jQuery on para capturar de forma confiable el evento de cambio de tamaño de la ventana.

que necesitaba usar jQuery css porque en mi caso estoy Cambiar el tamaño de un elemento pre (que muestra la ayuda de codificación) que se encuentra a la derecha del editor de código, y esta era la única manera de conseguir los dos elementos en exactamente La misma altura.

El 360 y 290 son los números que tenía que usar para dar cuenta de todos los menús y las fichas ocupando espacio vertical en la parte superior de la página. Ajustar en consecuencia.