1

我正在尝试在自动完成列表中添加页脚。我可以将另一个 LI 元素放在列表中，但我不能让它留在底部。

我做了一个小提琴，展示了列表的基本 HTML 结构。问题是，使用我拥有的 CSS，页脚会随着溢出区域滚动。我怎样才能让它固定在底部？

http://jsfiddle.net/jCbPZ/1/

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
    <li>Item5</li>
    <li>Item6</li>
    <li>Item7</li>
    <li>Item8</li>
    <li>Item9</li>
    <li>Item10</li>
    <li class="footer">Footer</li>
</ul>

ul{
    display: block;
    height: 100px;
    overflow: auto;
    position: relative;
    list-style: none;
}

li.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: gray;
    color: white;
}
4

5 回答 5

1

我认为您可以从不同的角度解决问题。

您可以扩展小部件自动完成插件，并通过覆盖该_renderMenu功能将自定义页脚添加到自动完成列表中。

代码：

$(function () {
    var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"];

    $.widget("custom.autocompletefooter", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var self = this;
            $.each(items, function (index, item) {
                self._renderItem(ul, item);
                if (index == items.length - 1) ul.append('<li class="footer-auto"> Footer of autocomplete!!</li>');
            });
        }
    });

    $("#tags").autocompletefooter({
        source: availableTags
    });

});

文档：http ://api.jqueryui.com/jQuery.widget/

演示：http: //jsfiddle.net/IrvinDominin/ykbrS/

于 2013-08-19T20:06:16.453 回答
0

使用包装器 div 和 div 作为页脚而不是 li。

HTML

<div>
    <ul>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
        <li>Item5</li>
        <li>Item6</li>
        <li>Item7</li>
        <li>Item8</li>
        <li>Item9</li>
        <li>Item10</li>
    </ul>
    <div class="footer">footer</div>
</div>

CSS

ul{
    height: 100px;
    overflow: auto;
    list-style: none;
    margin-bottom:0;
}

div.footer{
    background: gray;
    color: white;
}

http://jsfiddle.net/vBQEm/

于 2013-08-19T19:57:31.023 回答
0

为什么要定位最后一个列表元素？它将固有地位于列表的底部。

li.footer{
    background: gray;
    color: white;
}

例如，您可以看到这个JSFiddle。

于 2013-08-19T20:00:16.363 回答
0

演示在这里..

根据您的更新：

编辑：我的演示完全按照你想要的方式工作，试试看..页脚的位置绝对相对于列表，列表之外的内容对其没有影响，就像以前一样，我通过以下方式实现设置上边距。问题解决了。

li.footer {
    position:absolute;
    margin-top:100px;
    background: gray;
    color:white;
}

还删除了 ul 中的相对属性。

于 2013-08-19T19:50:50.340 回答
0

您可以将 as 定位bottom为footer：

li.footer{
    position: absolute;
    bottom: -100;
    left: 0;
    right: 0;
    background: gray;
    color: white;
}

在这里查看小提琴：http: //jsfiddle.net/jCbPZ/7/

于 2013-08-19T19:51:55.397 回答