ブラウザのサイズに基づいて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

はjpilloraの優れた指導に拡大https://github.com/ajaxorg/ace-builds/blob/master/editor.html#L14

Answer 3

ようposition:absolute;top:0; bottom:0 を設定します。

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構文を使用して、ウィンドウのサイズ変更イベントを確実にキャッチする必要があることも発見しました。私の場合、私はコードエディタの右側に座っているpre要素（つまり、コーディング、ヘルプを表示）をリサイズしています、これは正確に2つの要素を取得するための唯一の方法だったので、私はjQueryのcssを使用するために必要な

同じ高さ。

360と290は、ページの上部に縦のスペースを占めるすべてのメニューとタブを説明するのに必要な数字です。それに従って調整してください。