Question

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

标题
帆布
页脚

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

我尝试过多种方式：

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的情况下获取元素的渲染高度，包括边距？

我假设我们必须使用margin: 8px 0 8px 0;将id.style.margin分隔成单独的变量...但我不确定如何将其分开。

Answer 1

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

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

这正是jquery的外部宽度所做的，从:: http://youmightnotneedjquery.com/划伤可能是进一步发展的重要因素

编辑：在ie8中你必须使用el.currentStyle [prop]而不是getComputedStyle（el）;

Answer 2

您可以使用flex解决方案而不用担心计算高度：

<强> CSS：

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

canvas {
  flex: 1;
}

<强> HTML：

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

Fiddle

查找元素高度，包括边距

2 个答案: