Javascript HTML5画布，适合（屏幕的其余部分）

我已经制作了一个小的网络游戏，我正在使用下面的代码将游戏扩展到页面大小

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在画布上并不能很好地工作。

如果删除导航高度

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

及

---

在您的应用程序中尝试

html，body{overflow:hidden；}

css@Vashtamyty这样做了，但它仍然使我的游戏窗口比它应该的更大，但只是没有画出它？我可以制作一个div（可以缩放到页面），然后将菜单和游戏放入其中，并使该div适合屏幕吗？尽管我认为CSS不能有效地更改画布大小（它只缩放画布，但不会更改显示的像素数量）。很可能主体和/或html有其默认的填充/边距。试试这个：

html，在html
和css
div{position:relative；overflow:hidden；}canvas{width:100%；margin:auto；display:block；}
中的body{margin:0；padding:0；}

我在想，但这听起来像是一个相当“黑客”的解决方案。如果有人放大（这应该是不可能的，但不能真正阻止它）。菜单将增长，但变量将被硬编码，菜单将重叠等。啊，没关系，变量不是硬编码的，您通过id获取元素，因此它应该在缩放时工作。唯一的一个小问题是，当我放入其他对象时，它不会“动态”工作，但我并没有真正考虑这样做。你所说的“其他对象”是什么意思？例如，如果我要在菜单栏下添加一个“广告”，我必须将其添加到javascript的计算中。我相信CSS通常只能“根据需要进行缩放”，但对于canvas来说效果并不好？哈，好吧。您可以向所有元素添加一个类，如

interface\uu element

，并将具有该类的元素的总高度添加到菜单中，而不是

菜单中。offsetHeight

canvas {
    position:relative;
}