0

我已经按照说明如何使特定的 div 高度占据整个文档。我创建了以下函数，该函数在页面首次加载时完美运行。

function resizeBody() {
        $(document).ready(function () {
            $(window).resize(function() {
                $('.body').height((document).height - $(".topbar").height() - 30);
            });
            $(window).resize();
            console.log(document.height);
        });
    };

在我的代码的另一部分中，我使用 jquery 来隐藏和显示 div 以创建选项卡。这些标签都有不同的高度。代码如下：

$(document).ready(function() {
        $(".tab").click(function () {
            $(".tab_content").hide();
            $(".tab").css("font-weight","normal");
            resizeBody();
        });
        $("#infoButton").click(function() {
            $("#info").show();
            $("#infoButton").css("font-weight", "bold");
        });
        $("#toolsButton").click(function () {
            $("#tools").show();
            $("#toolsButton").css("font-weight", "bold");
        });
        $("#dataButton").click(function () {
            $("#data").show();
            $("#dataButton").css("font-weight", "bold");
        });
        $("#visButton").click(function () {
            $("#vis").css('display','inline-block');
            $("#visButton").css("font-weight", "bold");
        });
        resizeBody();
    });

我的问题是，当我隐藏或显示 div 时，文档的属性没有更新。在 resizeBody() 函数中调用 console.log(document.height) 仍然会打印文档的原始高度。奇怪的是，当我直接在开发人员控制台中输入“document.height”时，会打印出正确的（调整大小的）值。

此外，在打开开发者控制台后，页面似乎会更新（没有任何刷新），并且 body div 的大小已正确调整。

我在这里想念什么？这是 Chrome 特有的问题，还是我误解了关于 javascript 处理文档对象的方式的一些基本问题。

值得注意的是，我所有的 div 都使用 inline-block 作为其显示样式。每个 div 在 web 检查器中为其高度提供一个特定值。

4

0 回答 0