如何在纯javascript中以像素为单位获取高度？

Question

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

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

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

所以，问题是：

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

Answer 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>