Javascript 查找元素高度，包括边距

我正在制作一个简单有趣的绘图应用程序，其结构如下：

• 标题
• 帆布
• 页脚

我试图让画布成为窗口的全高，减去页眉高度和页脚高度

我尝试过多种方法，如：

canvas.height = window.height - (document.getElementById("header").offsetHeight + document.getElementById("footer").offsetHeight);

我甚至试过：

function getHeight(id) {
    id = document.getElementById(id);
    return id.offsetHeight + id.style.marginTop + id.style.marginBottom;
}

canvas.height = window.height - (getHeight("header") + getHeight("footer"))

但是没有用。在控制台中，

id.style.marginTop

刚刚返回了一个空字符串，尽管它的marginTop是在css中设置的。。。只是没有专门设置为marginTop，而是设置为

margin:8px 0 8px 0

在不使用jQuery的情况下，是否有任何方法可以获得元素的渲染高度，包括边距？

我假设我们必须分开
边距：8px 0 8px 0id.style.margin
将>编码为单独的变量。。。但我只是不知道如何把它分开

function outerWidth(el) {
  var width = el.offsetWidth;
  var style = getComputedStyle(el);

  width += parseInt(style.marginLeft) + parseInt(style.marginRight);
  return width;
}

这正是jquery的outerwidth所做的，从：：
可能需要进一步开发

编辑：在ie8中，您必须使用el.currentStyle[prop]而不是getComputedStyle（el）
 您可以使用flex解决方案，而不用担心计算高度：

CSS:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

canvas {
  flex: 1;
}

<div class="container">
  <header>...</header>
  <canvas>...</canvas>
  <footer>...</footer>
</div>

HTML:

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

canvas {
  flex: 1;
}

<div class="container">
  <header>...</header>
  <canvas>...</canvas>
  <footer>...</footer>
</div>


...
...
...

您是否记得用实际元素的id替换括号中的“id”？当然你没有一个名为“id”的id吗？@TylerH我编辑了这个问题，以弥补我造成的混乱。就我个人而言，我创建了一个单独的文件头，并在其中创建了一个外包装，但不关闭div。然后你创建画布页面，在包含页脚文件之前关闭底部的外包装。然后画布将是页眉和页脚之间的精确大小。希望这能有所帮助。@Fata1Err0r我在可视化你所说的内容时遇到一些问题。@grateen.Scripting我创建了一个头文件、主页和页脚文件。在我的标题中，我创建了一个DIV包装器，它将把我的标题/主要内容包装在一起，但我还没有关闭这个DIV。在我的主页上，省去了正常的初始HTML标记（等等），在底部你把你的标签放在页眉的DIV包装上，然后使用PHP在底部包含页脚文件。您还将使用PHP在主页顶部包含标题。这将保持主页页眉/页脚之间的精确空间大小。这就是我在给您的评论中所说的。使用包装器并像这样分开部分。它会给你想要的结果，你不必干扰实际的计算。这会扭曲画布的分辨率吗？我不这么认为，但如果会，请告诉我。它不应该扭曲它。它将以浏览器/监视器为基础，就像您手动尝试的那样。我刚刚测试了这个，虽然它是一个简单而漂亮的解决方案，但它确实扭曲了画布，并且浏览器支持有限。我确实认为这种风格设计方法对于不包括画布尺寸的网页设计来说是非常棒的。这个例子非常有效，你也给了我一个很棒的资源，谢谢！