Question

我的网站上有一个下拉列表，我希望将其扩展到我网页的可见底部。这样我就不必在所有下拉菜单上设置最大高度，因为它们实际上可以进一步拉伸以给用户更多空间来选择他们的选项。 100％的高度不适用于此。

所以，我的HTML很基本。它只是一个引导下拉列表

<div class="dropdownscroll dropdown-menu side-dropdown>
  <div  class="mCustomScrollBox">
    <div id="mCSB_18_container" class="mCSB_container mCS_y_hidden mCS_no_scrollbar_y">

        <ul>
            <li role="presentation">&nbsp;<a class="btn btn-default dropdownBtn" role="menuitem" tabindex="-1" data-bind="html: Name">D</a></li>

            <li role="presentation">&nbsp;<a class="btn btn-default dropdownBtn" role="menuitem" tabindex="-1" data-bind="html: Name">Married</a></li>

            <li role="presentation">&nbsp;<a class="btn btn-default dropdownBtn" role="menuitem" tabindex="-1" data-bind="html: Name">Single</a></li>

            <li role="presentation">&nbsp;<a class="btn btn-default dropdownBtn" role="menuitem" tabindex="-1" data-bind="html: Name">U</a></li>

            <li role="presentation">&nbsp;<a class="btn btn-default dropdownBtn" role="menuitem" tabindex="-1" data-bind="html: Name">W</a></li>

            <li role="presentation">&nbsp;<a class="btn btn-default dropdownBtn" role="menuitem" tabindex="-1" data-bind="html: Name">X</a></li>

        </ul>
    </div>
  </div>
</div>

我尝试了一些事情，但似乎我所做的一切都延伸到页面的可见部分之下......比如600px。

我已经尝试了

var theDiv = $('.dropdown-menu');
var divTop = theDiv.offset().top;
var winHeight = $(window).height();
var divHeight = winHeight - divTop;
theDiv.height(divHeight);

和

$('.dropdown-menu').height(function(index, height) {
    return window.innerHeight - $(this).offset().top;
});

以及

的一些变体

$('.dropdownscroll').height(function(index, height) {
    var current_height = $(this).height();
    var new_height = window.innerHeight - $(this).offset().top - parseInt($(this).css('padding-top')) - parseInt($(this).css('padding-bottom'));
        if (new_height > current_height) return new_height;
});

任何帮助都会很棒。

和小提琴。 http://jsfiddle.net/rtr4kd2d/2/

同样，我不能将下拉列表延伸到页面末尾。

Answer 1

您需要将以下代码应用于正确的元素（我不确定是否.dropdown-menu，）：

var theDiv = $('.dropdown-menu'); 
var winHeight = $(window).height();
var divHeight = winHeight - $('#dropdownMenu1').offset().top - $('#dropdownMenu1').outerHeight()-2 ;
theDiv.css('height',divHeight);

divHeight等于屏幕高度减去你的dropdownMenu的位置减去他的身高和-2（下拉菜单有一点差距来推下所有下拉菜单）

将引导下拉延伸到可见页面的底部

1 个答案: