按id获取元素的当前高度

Question

我有一个元素如下

<div id="loadNavigation" style="width:20%"></div>
<div id="loadContent" style="width:80%"></div>

基本上导航在左侧,内容在右侧.

现在我动态调整页面加载的大小loadContent和loadNavigation浏览器窗口高度的最小高度.虽然在更有可能的点上,如果它超过窗口高度,那么其中一个div的长度不会超过另一个div.为了防止这种情况发生,我希望通过获取高度值来增加到loadNavigation相同的大小.loadContentloadContent

到目前为止,我尝试过:

function resizeAppWindow() {

    var windowHeight = getWindowHeight();
    var contentElement = document.getElementById("content");
    var contentHeight = (windowHeight - 25);

    contentElement.style.minHeight = contentHeight + "px";

    var currentContentHeight = contentElement.style.height;
    var navigationElement = document.getElementById("navigation");
    var differenceInHeight = currentContentHeight - windowHeight;
    var navigationHeight = (windowHeight + differenceInHeight);

    navigationElement.style.minHeight = navigationHeight + "px";
}

但是currentContentHeight会返回null.我相信这是因为元素有一个style="min-height:00px;"但不是实际定义的高度？

任何指向正确的方向将不胜感激.

Answer 1

尝试offsetHeight:

var currentContentHeight = contentElement.offsetHeight; 

请查看此页面以获取更多高度/宽度属性以及它们如何跨浏览器处理 - quirksmode.org