在jQuery中将下拉最大高度限制为屏幕高度答案

【问题标题】：Limit dropdown max-height to screen height in jQuery在jQuery中将下拉最大高度限制为屏幕高度
【发布时间】：2014-10-11 03:36:07
【问题描述】：

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

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

有没有办法使用 CSS 或 jQuery 将其设置为屏幕高度（或更小），以便在屏幕高度发生变化时调整最大高度，尤其是。支持小屏幕？

我的 CSS：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：