Question

我的一个页面上有几个<ul>列表对象有点麻烦。

我有两个<ul>列表容器，它们是从客户端浏览器填充的。与此讨论无关，这两个容器将允许用户从每个容器中拖放<li>选项左侧＆lt; - ＆gt;并将用于手动排序的形式。

我的问题是这些列表中的任何一个可能包含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＆amp; jqueryui用于排序和使用UI元素。如果这些工具中有一个可以解决我的问题的选项，那么一个好的答案可能涉及使用这些工具之一，但这当然不是必需的。与此questino有关，JQuery从不接触这些对象的布局，除了插入在运行时从我的数据列表派生的<li>对象。

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

这是JSFiddle。请注意，填充了<ul>列表，以便小提琴的内容区域具有滚动条。还要注意列表中的无意义滚动条？我怎样才能使内容区域不需要滚动条，因为<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()});
    });

});

或者使用“nearest（'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/

Answer 2

编辑：我忘记了分号。哈。高度在ul上工作得很好，我只是犯了经典的错误。我从这个答案中清理了那个块。

但请注意，通过ul而不是包装器强加大小会导致某些浏览器出现一些奇怪现象。我工作的Firefox 31的绿色框与列表底部重叠。在这一点上，你必须使用定位技巧来保持犹太洁食，因此为什么包装仍然是最简单的。

最简单的方法是将ul包裹在div中，并调整div的大小 - 只需记住将丢弃事件转发给ul。

两个样本： https://jsfiddle.net/b6zu3Lhy/6/

首先是强制保留在其父

内的动态添加列表

第二个是ul，身高限制......但不是正确的身高限制。

如果您遇到不太喜欢的百分位数问题（即：百分比什么也不做），您就需要html,body{ height:100%; }技巧。如果你不能这样做，你可以用屏幕单位（vw / vh）来反映父母的大小。

下面提供的演示代码（来自小提琴）是为了完整性。

＆＃13;

function $(a, b) { return (b || document).getElementById(a); }
$.bind = function (ele, o) { for (var event in o) ele.addEventListener(event, o[event]); };
$.init = function (init, args, me) { if (document.readyState !== "loading") { init.apply(me, args); } else { document.addEventListener("DOMContentLoaded", function () { init.apply(me, args); }); } }
$.hasClass = function (ele, cls) { return ele.classList.contains(cls); }

$.init(function(){
    $.bind($("libtn"),{
        click:function(){
            var ul = $("ul");
            var li = document.createElement("li");
            li.innerHTML = "yo" + "oooooooooo".substr(Math.floor(10*Math.random()));
            ul.appendChild(li);
        }
    });

    $.bind($("szbtn"),{
        click:function(){
            var div = $("box");
            if($.hasClass(div,"sz1")){
                div.className="box sz2";
            }else if($.hasClass(div,"sz2")){
                div.className="box sz3";
            }else{
                div.className="box sz1";
            }
        }
    });
});

＆＃13;

ul{
  margin-top:0; margin-bottom:0;
}

.box{
  border:2px solid gray;
  overflow-y:auto;
}

.sz1{ height:50px; }

.sz2{ height:100px; }

.sz3{ height:200px; }

.demo2{
  height:75px;
  overflow:visible;
  border:1px solid green;
}
.demo2 ul{
  font-style:italic;
  height:100%;
  overflow-y:auto;
}

＆＃13;

<button type="button" id="libtn"> +li </button>
<button type="button" id="szbtn"> szTog </button>

<div id="box" class="box sz1">
  <ul id="ul">
  </ul>
</div>
<div class="demo2">
  <ul>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>static list with size limit</li>
    <li>11 static list with size limit</li>
  </ul>
</div>

＆＃13;

Answer 3

如果我正确理解你的问题，你有几个选择。

假设每个容器有一个列表，您可以执行以下操作：

<强> HTML

<div class="list-container">
    <ul class="col_selector_container" id="ulUnusedColumns"></ul>
</div>
<div class="list-container">
    <ul class="col_selector_container" id="ulUsedColumns"></ul>
</div>

<强> CSS

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

绝对位置的所有怪癖都适用于此，但它应该会给你你正在寻找的效果。如果你支持IE10 +，那么Flexbox肯定是在这里使用的选项。如果需要，您还可以在此处使用css表作为子绝对/父亲相对的替代。

如果这不起作用，我们可能需要更多的HTML结构来了解事情的布局。

希望这有帮助！

如何强制动态<ul>达到其父级的高度的100％，不多也不少？

HTML

CSS

附加说明

3 个答案: