10

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

我想使用一点 JavaScript 来动态调整max-heightCSS 属性，以便 div 延伸到浏览器窗口的底部。我怎样才能确定这个值？jQuery 解决方案很好。

表格不是从页面顶部开始的，所以我不能只将高度设置为 100%。

4

4 回答 4

16

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

var topOfDiv = $('#divID').offset().top;
var bottomOfVisibleWindow = $(window).height();
$('#divID').css('max-height', bottomOfVisibleWindow - topOfDiv - 100);
于 2010-12-30T19:30:49.150 回答
3

我有一个非常相似的问题，除了在我的情况下，我有一个动态弹出元素（一个 jQuery UI Multiselect 小部件），我想对其应用一个最大高度，以便它永远不会低于页面底部。在目标元素上使用 offset().top 是不够的，因为它返回的是相对于document的 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});
于 2014-03-15T21:28:19.817 回答
1

window.innerHeight为您提供整个窗口的可见高度。我最近做了一些几乎相同的事情，所以我很确定这就是你需要的。:) 让我知道，不过。

编辑：你仍然需要溢出的 div 的 Y 值，你可以通过它document.getElementById("some_div_id").offsetHeight看到它.style.top不会给你结果，除非它通过 CSS 专门设置为一个点。.offsetHeight应该给你正确的“最高”价值。

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

于 2010-12-30T19:24:29.137 回答
-1

类似的东西max-height: 100%，但不要忘记 html 和正文高度 100%。

于 2010-12-30T19:26:26.670 回答