我已经按照说明如何使特定的 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 检查器中为其高度提供一个特定值。