Question

我有一个如下元素

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

基本上导航在左侧，内容在右侧。

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

到目前为止，我已经尝试过：

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

按id获取元素的当前高度

1 个答案: