如何在纯javascript中获取像素高度？答案

【问题标题】：How to get the height in pixels in pure javascript?如何在纯javascript中获取像素高度？
【发布时间】：2018-01-04 12:29:32
【问题描述】：

我有一个具有以下 HTML 结构的论坛：

<div id="header">Contents</div>
<div id="main">Contents</div>
<div id="footer">Contents</div>

基本上，我需要将#main 的高度设置为文档的高度减去其他2 个元素的高度。问题是我必须在没有 jquery 的情况下这样做。我搜索了这个问题并找到了 clientHeight 方法，但它以数字形式返回高度，而我需要它作为像素。

所以，问题是：

有什么方法可以在纯 JavaScript 中以像素为单位获取高度？

【问题讨论】：

为什么不使用 CSS？
这些数字以像素为单位对吗？
您只需通过Math.round 对其进行四舍五入并添加字符串'px'。但我同意@evolutionxbox，CSS 解决方案会更干净。
#header 和 #footer 没有固定高度，否则我会使用 CSS。我会尝试 Stephan 的解决方案并回复。
Don't use JavaScript for this

标签： javascript height pixel

【解决方案1】：

属性 .clientHeight 将返回一个数字（以像素为单位的高度）。

在您的情况下，下面是重置div#main 高度的代码。请注意，我们在末尾添加了一个“px”以使 .style.height 起作用：

document.getElementById('main').style.height = parseInt(window.innerHeight) -
document.getElementById('header').clientHeight + 
document.getElementById('footer').clientHeight + "px";

<div id="header">CONTENT</div>
<div id="main">CONTENT</div>
<div id="footer">CONTENT</div>

【讨论】：