Question

我试图在自动填充列表中添加页脚。我能够在列表中添加另一个LI元素，但我不能让它留在底部。

我做了一个小提示，显示了列表的基本HTML结构。问题是，使用我的CSS，页脚滚动溢出区域。我怎样才能把它挂在底部？

<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;
}

Answer 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/

Answer 2

<强> Demo here..

根据您的更新：

编辑：我的演示工作正是你想要的，尝试一下..页脚的位置绝对相对于列表，列表外的内容对它没有影响，就像以前一样，我通过设置上边距来实现这一目标。问题解决了。

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

还删除了ul。

中的相对属性

Answer 3

您可以将bottom的{{1}}定位为：

footer

请参阅此处的小提琴：http://jsfiddle.net/jCbPZ/7/

Answer 4

使用包装器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/

Answer 5

为什么要定位最后一个列表元素？它本身就位于列表的底部。

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

例如，您可以看到此JSFiddle。

在jqueryui自动完成列表中放置页脚

5 个答案: