CSS / jQuery：限制下拉最大高度到屏幕高度

Question

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

如果我应用下面的CSS比这解决了问题，并且还得到了一个垂直滚动条，这就是我想要的情况。 我唯一的问题是max-height是一个固定值。 注意：我需要能够支持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');
    });
});