Question

以下是提出这个问题的几种方法：

如何获得页面开始滚动条的高度（以像素为单位）？换句话说，如何获得滚动条出现的窗口高度？
如何获得页面上没有亲戚的所有元素的最大高度高度（例如身高：100％）？

这个问题是相关的，但在相对高度的情况下，答案并不符合我的要求：Finding the full height of the content of a page/document that can have absolutely positioned elements

我对我正在谈论的内容做了一个小问题：http://tinyurl.com/kgf8dae。不幸的是，jsfiddle似乎打破了div的相对高度 - 在普通浏览器中将其作为html页面运行以查看真实行为。

Answer 1

我可能会误解这个问题。通常，如果窗口高度小于文档高度，您将获得垂直滚动条。

所以在jQuery中，检查可能如下所示：

if( $(document).height() > $(window).height() ){ /* There will be a scrollbar */ }

您可以在DOM更改和窗口大小调整事件中执行此检查，以确定是否已出现滚动条。要抢先确定某个事件是否会导致滚动条出现可能会非常棘手，并且可能需要对页面和潜在事件有所了解才能有效处理。

Answer 2

这是通过jQuery标记的，所以我将使用jQuery;即使问题正文中没有提到它。

a）听起来你想要获得视口（窗口）的高度;可以像这样检索：

var height = $(window).height();

如果文档（页面）的高度超过窗口的高度，并且没有阻止滚动条显示的CSS属性，那么滚动条确实会显示。

if( $(document).height() > $(window).height() )

b）这将会有点棘手，从某种意义上来说，唯一的方法是查询每个DOM元素。这不是一个优雅的解决方案;并且事实上，如果你真的必须这样做，我会要求你重新考虑你的方法。那说...好奇......

如果您正在寻找最大高度，从最大元素的意义上来说 - 那么这将有效：

// Get height of largest element.
var max_height = 0;

$('*').each( function(){
    // skip <html> and <body>
    if( ( $(this).get(0) == $('body').get(0) ) || ( $(this).get(0) == $('html').get(0) ) )
      return;

    var current_height = $(this).height();

    if( current_height > max_height )
      max_height = current_height;
});

例如，在此页面上运行...

> console.log( max_height );
570

但是，我不确定你是否想要所有组合元素的最大高度。在这种情况下，我们显然需要添加所有元素，但是有明显的问题：元素是嵌套的！

如果这是您想要的，那么通过使用.children()，我们可以遍历包含元素/正文的直接子元素的元素的长度。

// Get height of all combined elements
var combined_height = 0;

$('body').each( function(){  // replace with containing element?
    combined_height = combined_height + jQuery(this).height();
});

例如，在此页面上运行：

> console.log(combined_height);
2176

Answer 3

使用您提供的示例中的HTML / CSS（jsfiddle.net/RMe3n/1）。答案是并且始终是242。

但是，我认为你正在寻找一种更有活力的方法。在DOM准备好之后运行以下命令也将产生242：

var answer = 0;
$('#absolutes > div').each(function(){
    var h = $(this).outerHeight(true);
    if(answer < h) answer = h;
})
alert(answer);

虽然上面将解决您提供的特定HTML / CSS，但它对页面的HTML结构和CSS做了很多假设。

通过调整页面的HTML / CSS，您尝试使用JS解决的问题是否可以通过“更干净”的方式解决？

如果您正在寻找一种简单的JS方法来解释现在存在的所有大量独特布局/样式，并且可能存在，因为将来会采用更多CSS3显示类型，我相信您运气不好。没有可推荐的，一致的，有效的方法。

注意：如果这不仅仅是理论上的讨论，请考虑更具体地说明您所面临的确切情况，因为可能存在可能解决问题的极为不同的方法。

获取滚动条在javascript中出现的高度

3 个答案: