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; 
}