Resize ajax.org ACE-Editor basierend auf der Größe des Browsers

Question

Ich möchte den ACE-Editor in der Größe des Browsers Größe ändern lassen. Das Editor-Element muss jedoch explizit dimensioniert sein, damit von der API des ace-Editors initialisiert werden kann.

Der Editor funktioniert, wenn ich die Breite einstellen: 100%/Höhe: 400px. Mit dieser Einstellung kann die Breite des Editors an die Breite des Browsers angepasst werden. Allerdings reagiert nicht auf die Höhe des Editors.

Gibt es eine Möglichkeit, die Größe des Editors flexibler zu machen, indem man auf die Größe des Browsers reagiert?

Dank

Answer 1

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

Answer 2

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

Answer 3

auf exzellente Führung jpillora der Expanding:

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

window.innerHeight von IE8 + unterstützt wird und die nutzbare Fläche des Bildschirms für immer zuverlässig scheint . Ich endete mit identischen Ergebnissen auf IE9, FF und Chrome. Ich fand auch, dass ich die jQuery on Syntax verwenden musste, um das Fensterresize Ereignis zuverlässig zu fangen.

Ich brauchte jQuery css weil in meinem Fall verwende ich bin Ändern der Größe eines pre Element (das zeigt Codierung Hilfe), die auf der rechten Seite des Code-Editor sitzt, und das war der einzige Weg, um die beiden Elemente genau zu erhalten die gleiche Höhe.

Die 360 und 290 sind die Nummern, die ich verwenden musste, um alle Menüs und Tabs zu berücksichtigen, die vertikalen Platz am oberen Rand meiner Seite einnehmen. Dementsprechend anpassen.