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');
    });
});