jquery - 将下拉列表的最大高度限制为 jQuery 中的屏幕高度

Question

我有一个 HTML 页面，需要在顶部导航栏的下拉菜单中显示大量内容，这导致某些下拉菜单在打开时超出了屏幕高度。我使用 Bootstrap 3 并使用无序列表 ( <ul> ) 标签创建了自己的下拉菜单。

如果我应用以下 CSS，问题就解决了，并且还得到了一个垂直滚动条，这正是我在这种情况下想要的。我这里唯一的问题是最大高度是一个固定值。注意:我需要能够支持 IE8 和 IE9。

有没有一种方法可以使用 CSS 或 jQuery 将其设置为屏幕高度(或稍低一些)，以便在屏幕高度发生变化时调整最大高度，尤其是。支持较小的屏幕？

我的 CSS:

<ul class="dropdown-menu" style="max-height:300px; overflow:auto">

Answer 1

这将设置列表的高度，以免溢出屏幕。
试试这个:

$(function(){
    $(window).resize(function(){
        $('ul').css('max-height', ($(window).height() - $('ul').offset().top) + 'px');
    });
});