Ridimensiona l'editor ACE ajax.org in base alle dimensioni del browser

Question

Desidero rendere ridimensionabile l'editor ACE in base alla dimensione del del browser. tuttavia, l'elemento dell'editor deve essere dimensionato in modo esplicito in modo da poter inizializzare dall'API dell'ASB.

L'editor funziona quando imposto la larghezza: 100%/altezza: 400 px. Avere questa impostazione consente alla larghezza dell'editor di reagire alla larghezza del browser. Tuttavia, non è reattivo per l'altezza del montatore.

C'è un modo per rendere le dimensioni dell'editor più flessibili rispondendo alle dimensioni del browser?

Grazie

Answer 1

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

Answer 2

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

Answer 3

Ampliando eccellente guida di 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 è supportato da IE8 + e sembra affidabile per ottenere la superficie utile dello schermo . Ho finito con risultati identici su IE9, FF e Chrome. Ho anche scoperto che dovevo usare la sintassi jQuery on per catturare in modo affidabile l'evento di ridimensionamento della finestra.

avevo bisogno di usare jQuery css perché nel mio caso sto Ridimensionamento di un elemento pre (che mostra l'aiuto di codifica), che siede alla destra del editor di codice, e questo era l'unico modo per ottenere i due elementi a esattamente la stessa altezza

I numeri 360 e 290 sono i numeri che dovevo utilizzare per tenere conto di tutti i menu e le schede che occupavano spazio verticale nella parte superiore della mia pagina. Regolare di conseguenza.