jquery - 如何强制动态 <ul> 为其父级高度的 100%，不多也不少？

Question

我遇到了一些问题 <ul>列出我的某一页面上的对象。

我有两个<ul>列出从客户端浏览器填充的容器。与此讨论无关，这两个容器将允许用户拖放 <li>每个容器的 left<->right 选项，将用于手动排序的形式。

我的问题是，这些列表中的任何一个都可能包含 0 到 60 个以上的元素。当列表容器之一中有许多列表项时，父级会远远超过屏幕大小并出现滚动条，而 <ul>容器可以增长到所需的大小。

我希望滚动条位于 <ul> 上仅对象(并且功能正常。)

我用谷歌搜索了这个，找到了多个关于强制内容达到父容器大小的答案，但大多数示例通常涉及 <div>对象，我不确定 <ul> 是否有不同之处导致其行为不同的容器。

下面是我的相关代码。

HTML

...
<ul class="col_selector_container" id="ulUnusedColumns"></ul>
<ul class="col_selector_container" id="ulUsedColumns"></ul>
...

此内容包含在第三方 Telerik 控件中。 Telerik 控件的内容区域是一个 div，其大小适合可用内容区域，无论是否包含开发人员提供的内容。但是，如果内部内容不适合，内容区域会变大，因此，当 <ul> 时会出现自动滚动条。容器已满且尺寸过大。

CSS

ul.col_selector_container 
{
    overflow-y: scroll;
    list-style-type: none;
    height: 100%;
    width: 300px;
    display:inline-block;
    vertical-align:top;
    padding-left: 0px;
}

请注意 height: 100%似乎没有做任何事情。该列表将增大或缩小以匹配内部内容的高度，而不是父容器的高度。另外，overflow-y: scroll;除了显示滚动条之外不执行任何操作，如果 UI 只是要调整列表大小，则滚动条毫无意义。

我该如何解决这个问题？

附加说明

我正在使用 jquery 和 jqueryui 进行 sortign 并使用 UI 元素。如果这些工具中有可以解决我的问题的选项，则可以使用这些工具之一，但这当然不是必需的。关于这个问题，JQuery 从不触及这些对象的布局，除了插入 <li>对象，在运行时从我的数据列表派生。

对于那些想要例子的人，我能给出的最好的就是问题的例子。

这是一个JSFiddle 。请注意 <ul>填充列表，以便 fiddle 的内容区域有一个滚动条。还注意到列表上毫无意义的滚动条吗？我怎样才能使内容区域不需要滚动条，因为 <ul>根据内容窗口调整自身大小(包含更多或更少的列表项)，当列表区域太大时，您可以滚动列表内容。

Answer 1

这可以通过 jQuery 轻松实现:

jQuery:

$(document).ready(function(){

    var list = $('ul.col_selector_container');

    list.css({'min-height':list.parent().height(), 'max-height':list.parent().height()});


    $(window).resize(function(){
       list.css({'min-height':list.parent().height(), 'max-height':list.parent().height()});
    });

});

或者使用“closest('selector')”来获取 DOM 树中更高的父级高度。

2017 年更新:

现在可以通过 FLEX 实现这一点:

<style>
.parent{
    background:red;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height:300px;
}

ul{
    background:yellow;
}
</style>

<div class="parent">
    <ul>
        <li>Test1</li>
        <li>Test2</li>
    </ul>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/