$(document）.height和$(window）.heaght都返回相同的值-使用的是正确的doctype

$(document).height and $(window).height both return the same value - proper doctype in use

本文关键字：doctype height document window heaght 返回      更新时间：2023-09-26

我正在设置一个浮动动作按钮，就像在谷歌的新材料设计中一样。这是我现在使用的jQuery：

$(document).ready(function () {
    var doc = $(document).height();
    var height = $(window).height();
    var offset = height - 20 ;
    console.log(doc);
    console.log(height);
    console.log(offset);
    $("#floating_nav_container").css("top",""+ offset +"px");   
});

我希望能够检测视口的高度，并使我的动作按钮显示在底部上方20px。

我的"floating_nav_container"是引导程序"col-md-6"父div中的一个绝对定位的div，我为测试目的设置了900px的固定高度。

有时$(document).height()会得到900的正确值，而其他时候则不会；CCD_ 2总是与文档1相同。

我的doctype是：

<!DOCTYPE html>

我在这里读到的是当这两个方法返回相同值时的常见修复方法。

编辑：我正试图在一个3列的布局中实现这一点。"floating_nav_container"仅适用于中间列。将它的CSS设置为底部为20px的固定位置是不起作用的，因为根据视口的大小，动作按钮可能会显示在第三列或列外。

如果将"floating_nav_container"设置为固定的，并将其设置为中间列的子级代码，则其行为与在DOM顶部设置的行为相同。

我选择了将它完全放置在中间列中，因为无论浏览器如何调整大小，它都会留在父容器中。问题是，当页面超出视口的高度时，按钮就会消失。

我希望找到一种计算高度的方法，并让它动态地确定任何设备与视口底部的偏移量。

将#floating_nav_container移到父div之外，并使用@floribon的解决方案。此外，如果你希望它总是离底部20像素，即使在滚动时也要将位置设置为固定。

#floating_nav_container{
  position:fixed;
  bottom:20px;
}

我在这里为你加了一把小提琴https://jsfiddle.net/9v9u8ybp/

我建议你在CSS中完全这样做，以防止任何错误：

#floating_nav_container {
  position: absolute;
  bottom: 20px;
}

对于元素的视口感知定位，请使用CSS而不是jQuery或js，如下所示：

#floating_nav_container {
    position: fixed;
    bottom: 20px;
}

我使用这里提出的一些解决方案找到了一个最适合我的解决方案。如果其他人将来遇到类似的问题，这里是我所做的一切，让它变得最简单。

我将"#floating_nav_container"从中间列中移出，这样它就不是任何东西的子项。

"#floating_nav_container"上的CSS如下：

#floating_nav_container {
position:fixed;
bottom:20px;
right:40px;
z-index:10;
}

这使它能够正确定位以供移动使用，但一旦设计缩放到桌面大小，就不会将按钮保持在中间列中。

为了确保按钮始终位于中间一列，我使用媒体查询将其"正确"设置为31%。

@media (min-width: 992px) {
  #floating_nav_container {
    right:31%;
  }
}

我的布局是用bootstrap制作的，第三列是"col-md-3"，它总是视口可用宽度的25%。通过将"#floating_nav_container"的右侧设置为31%，我使其能够在设计缩放时始终隐藏在中间列中。

一旦右列被删除，只剩下中间一列，那么"#floating_nav_container"的默认css就会启动并处理显示。

这完全消除了我使用jQuery的需要。

相关文章：