如何使用JavaScript轻松查找页面上的一个点与浏览器窗口底部之间的距离？

Question

我的Web应用程序中的一个视图有一个表格，可能非常长，因此我将其包装在一个带有overflow：auto; max-height: 400px;的div中，以便用户可以滚动它，同时保持页面上的其他控件可见。

我想使用一些JavaScript来动态调整max-height CSS属性，以便该div伸展到浏览器窗口底部。如何确定这个值？jQuery解决方案也可以。

表格不从页面顶部开始，因此我不能只将高度设置为100%。

- Brant Bobby

Answer 1

我想这样做应该可以:

var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);

- mrtsherman

---

啊啊啊，offset() 方法...我的脑子完全忘记了它的存在。是时候喝更多的咖啡了。 - Brant Bobby

Answer 2

我曾经遇到类似的问题，但我的情况是有一个动态弹出元素（一个jQuery UI多选组件），我想对其应用max-height属性使其不会超出页面底部。在目标元素上使用offset().top并不能解决问题，因为它返回相对于文档的x坐标而不是页面的垂直滚动位置。 因此，如果用户向下滚动页面，则offset().top将无法准确描述他们相对于窗口底部的位置-您需要确定页面的滚动位置。

var scrollPosition = $('body').scrollTop();
var elementOffset = $('#element').offset().top;
var elementDistance = (elementOffset - scrollPosition);
var windowHeight = $(window).height();
$('#element').css({'max-height': windowHeight - elementDistance});

- Eugene Ananin

Answer 3

window.innerHeight 可以获取整个窗口的可见高度。我最近做了几乎相同的事情，所以我很确定这就是你需要的。 :) 不过，如果有需要，请告诉我。

编辑：你仍然需要溢出 div 的 Y 值，可以通过 document.getElementById("some_div_id").offsetHeight 获取，因为除非通过 CSS 明确设置到某个点，否则 .style.top 不会给出结果。 .offsetHeight 应该会给出正确的 'top' 值。

然后只需要将表格的大小设置为窗口高度减去 div 的 'top' 值，再减去其他内容的任意余地即可。

- Teekin

Answer 4

类似于max-height: 100%这样的东西，但不要忘记将html和body的高度设置为100%。

- Habax

---

你假设他的表格从顶部填充屏幕到底部。他需要知道窗口的内部高度，以便计算他还有多少空间可以用于表格。 - Teekin