根據瀏覽器的大小調整ajax.org ACE編輯器

Question

我想讓ACE編輯器根據瀏覽器的大小 調整大小。然而，編輯器元素必須明確地設置大小以便由ace編輯器的API初始化 。

當我設置寬度：100％/ height：400px時，編輯器工作。通過此設置，編輯器的寬度可以響應瀏覽器的寬度。但是，對編輯的高度沒有反應。

有沒有辦法通過響應瀏覽器的大小來使編輯器的大小更靈活？

感謝

Answer 1

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

Answer 2

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

Answer 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是我需要用來說明所有菜單和選項卡佔用頁面頂部垂直空間的數字。相應地調整。