2

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

  • 如何获得页面开始有滚动条的高度（以像素为单位）？换句话说，我如何获得滚动条出现的窗口高度？

  • 如何获得页面上所有没有相对高度的元素的最大高度（例如高度：100%）？

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

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

4

3 回答 3

2

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

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

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

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

于 2013-06-14T23:42:41.160 回答
1

这是通过 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
于 2013-06-14T23:47:04.893 回答
0

使用您通过 (jsfiddle.net/RMe3n/1) 提供的示例中的 HTML/CSS。答案是并且永远是 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 做了很多假设。

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

如果您正在寻找一种万无一失的 JS 方法来解决现在存在的以及随着未来采用更多 CSS3 显示类型而可能存在的所有独特布局/样式，我相信您不走运。没有可推荐的、一致的、有效的方法来做到这一点。

注意：如果这不仅仅是理论上的讨论，请考虑更具体地了解您所面临的确切情况，因为可能有一种截然不同的方法可以解决该问题。

于 2013-06-19T04:22:44.830 回答