HTML5畫布，適合屏幕的其餘部分

Question

我製作了一個小型網頁遊戲，我使用下面的代碼將遊戲縮放到頁面大小。

var canvas = document.getElementById("game"); 
var ctx = canvas.getContext("2d"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.body.appendChild(canvas); 
// Attempt at auto-resize 
function resize_canvas(){ 
    if (canvas.width != window.innerWidth) 
    { 
     canvas.width = window.innerWidth; 
    } 
    if (canvas.height != window.innerHeight) 
    { 
     canvas.height = window.innerHeight; 
    } 
} 
window.addEventListener("resize", resize_canvas); 
window.addEventListener("orientationchange", resize_canvas); 

但是，我現在使用一些CSS在遊戲的頂部添加一個菜單，我遇到了問題。 遊戲需要內部窗口的大小，所以隨遊戲一起顯示的內容將導致內容不適合瀏覽器。

我該如何讓遊戲「填充」窗口的其餘部分？

（我已經找到了如何擴展遊戲窗口的問題，但我想比賽，以填補窗口，而不是）

的圖像來演示以下問題：

（注意滾動條，我想以消除）

編輯： 我是很新的Web開發，但我有感覺的CSS並沒有真正在畫布上工作得很好。

Answer 1

如果您刪除導航高度？

var canvas = document.getElementById("game"); 
var ctx = canvas.getContext("2d"); 
var menu = document.getElementById('nav') 
resize_canvas(); 
document.body.appendChild(canvas); 

// Attempt at auto-resize 
function resize_canvas(){ 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight - menu.offsetHeight; 
} 
window.addEventListener("resize", resize_canvas); 
window.addEventListener("orientationchange", resize_canvas); 

和

canvas { 
    position:relative; 
}