Question

测量整个页面高度的最佳方法是什么，而不仅仅是屏幕。我问的原因是因为我需要添加一个覆盖div，它应该完全覆盖它。也许我可以测量高度并添加更多像素以获得良好的测量结果？

如果我做这样的事情，这是一个朝着正确方向迈出的一步吗？

$('#myOverlay').height($('#myPage').height() + 100) ;

Answer 1

覆盖的CSS / HTML方法

如果你想要一个叠加层来覆盖另一个元素或视口，那么只使用CSS / HTML就可以了，它可以更快，也适用于禁用JavaScript的浏览器。

CSS示例

通过使用绝对位置，我们可以告诉浏览器使用overlay元素填充整个容器，只要容器元素相对定位：

#myPage {
    position: relative;
}

#myOverlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

#myOverlay.fixed {
    position: fixed;
}

HTML示例

使用叠加层覆盖 #myPage 元素（请参阅jsFiddle）：

<div id="myPage">
    <p>This will be covered by the overlay</p>
    <div id="myOverlay"></div>
</div>

要覆盖整个身体，即视口，请将覆盖元素放在body的结束标记之前，并使用固定定位（请参阅jsFiddle）：

<body>
    <div id="myPage"></div>
    <div id="myOverlay" class="fixed"></div>
</body>

获取整个文档的JavaScript方法

要获取文档的整个高度（即使是视口之外的内容），您可以使用James Padolseys solution，这非常简单，适用于所有浏览器：

$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};

Answer 2

如果您考虑使用固定定位的叠加层而不是绝对叠加层，则不需要屏幕的高度，但它会一直覆盖它。在这里试试：http://jsfiddle.net/c4uzQ/9/

.overlay
{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #909090;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

Answer 3

您可以尝试使用：

$(document).height();

现在没时间进行测试，但要检查一下。

使用jQuery的页面高度

3 个答案: