Question

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

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

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

Answer 1

我认为这样的事情会起作用：

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

Answer 2

我有一个非常类似的问题，除了在我的情况下我有一个动态弹出元素（一个jQuery UI Multiselect小部件），我想要应用 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});

Answer 3

window.innerHeight为您提供整个窗口的可见高度。我最近做了几乎相同的事情，所以我很确定这就是你需要的。 :)但请告诉我。

编辑：你仍然需要document.getElementById("some_div_id").offsetHeight可以获得溢出div的Y值，看到.style.top除非专门设置为.offsetHeight，否则不会给你一个结果通过CSS得分。 {{1}}应该为您提供正确的“最高”值。

然后，只需将表格的大小设置为窗口高度，减去div的“顶部”值，减去您想要其他内容的任意摆动空间。

Answer 4

类似于max-height: 100%，但不要忘记html和身高100％。

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

4 个答案: