如何修复 Foundation 4 顶部栏中过长的 CSS 下拉菜单？答案

【问题标题】：How to fix too long css dropdown in Foundation 4 top bar?如何修复 Foundation 4 顶部栏中过长的 CSS 下拉菜单？
【发布时间】：2013-12-09 22:34:44
【问题描述】：

我正在尝试使用 Foundation 4 框架修复网页。该页面有一个高于屏幕高度的 CSS 下拉菜单。无法在屏幕上显示的项目，请参阅菜单 Baggers |巴黎在这个简化的演示页面上：

http://janosgyerik.github.io/BrownBagLunch/dropdown-issue.html

最好让下拉菜单滚动，例如本页所示：

http://css-tricks.com/examples/LongDropdowns/

并在此页面上解释：

http://css-tricks.com/long-dropdowns-solution/

我从解释中复制了代码，但我不是 CSS 专家，我一直在努力将这些代码应用到我上面的演示页面中。有人可以帮我吗？我也对其他类型的解决方案持开放态度，不一定是这种特殊的技巧。

更新

受@topless'回答的启发，我这样解决了：

function fixDropdown() {
    var maxheight = $(window).height() - $('nav.top-bar').height();
    var dropdown = $('ul.dropdown ul.dropdown');
    dropdown.css({ 'max-height': maxheight, 'overflow-y': 'auto' });
}
$(window).on('load', fixDropdown);
$(window).on('resize', fixDropdown);

【问题讨论】：

标签： javascript jquery css drop-down-menu zurb-foundation

【解决方案1】：

当高度大于浏览器窗口的大小时，除了滚动之外，我没有看到任何其他解决方案。使用 css 我会这样做。如果您不希望选项到达页面底部，您可以定义 max-height 属性。

ul {
    max-height: 300px;
    overflow-y: scroll;
}

为了达到你发布的长下拉的效果，你可以关注instructions 来自 css-tricks 中的同一个人。

【讨论】：

就是这样，我无法按照这些步骤进行操作。这真的不容易，我希望有人能帮助我。但是在我尝试了你的答案之后，我更喜欢这种更简单的方法，所以谢谢。请参阅我的更新以了解我的实际解决方案。
这将是一个很好的解决方案，但下拉菜单的三角形被 overflow-y: scroll 隐藏了。我建议在下拉列表中添加另一个 div，高度：100% 和溢出-y：自动

【解决方案2】：

我正在使用基础 5，并且我实施了一种略有不同的方法。而不是听窗口调整大小，我更喜欢听下拉 opened 事件。

我有一个导航栏和一个包含内容的容器，我在容器中添加了一个内边距以补偿剪切的下拉高度。

$('body').on('opened.fndtn.dropdown', '[data-dropdown-content]', function() {
    var dropdownPosition = $(this).offset();
    var dropdownHeight = $(this).outerHeight(true);
    var containerHeight = $('#main').outerHeight();  // my container is #main, what is yours?
    var missingPadding = dropdownPosition.top + dropdownHeight - containerHeight  - $('nav.top-bar').height();
    $('#main').css('padding-bottom', missingPadding + 'px');
}

【讨论】：