Css 在jqueryui自动完成列表中添加页脚

我试图在自动完成列表中添加页脚。我可以在列表中添加另一个LI元素，但我无法让它保持在底部

我做了一把小提琴，展示了列表的基本HTML结构。问题是，在我使用的CSS中，页脚与溢出区域一起滚动。我怎样才能把它固定在底部

项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
页脚

保险商实验室{
显示：块；
高度：100px；
溢出：自动；
位置：相对位置；
列表样式：无；
}
页脚{
位置：绝对位置；
底部：0；
左：0；
右：0；
背景：灰色；
颜色：白色；
}

根据您的更新：

编辑：我的演示正是你想要的，试试看。。页脚的位置绝对是相对于列表的，而列表之外的内容对它没有影响，正如它以前所做的那样，我通过设置上边距来实现这一点。问题解决了

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

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

根据您的更新：

编辑：我的演示正是你想要的，试试看。。页脚的位置绝对是相对于列表的，而列表之外的内容对它没有影响，正如它以前所做的那样，我通过设置上边距来实现这一点。问题解决了

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

---

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

您只需将

页脚的
底部定位为：

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

查看此处的小提琴：
您可以将
页脚的
底部定位为：

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

请看这里的小提琴：
使用包装div和div作为页脚，而不是li

HTML

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

HTML

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

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

例如，您可以看到。
为什么要定位最后一个列表元素？它将固有地位于列表的底部

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

你可以看到这个例子。
我认为你可以用不同的观点来处理这个问题

您可以扩展widget autocomplete插件，并通过覆盖
\u renderMenu
函数将自定义页脚添加到autocomplete列表中

代码：

$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“计划”]；
$.widget（“custom.autocompletefooter”，$.ui.autocomplete{
_renderMenu：功能（ul，项目）{
var self=这个；
$。每个（项目、功能（索引、项目）{
自我评估（ul，项目）；
如果（index==items.length-1）ul.append（“
自动完成的页脚！！
”）；
});
}
});
$（“#标记”）.autocompletefooter({
资料来源：availableTags
});
});

文件：

演示：
我认为你可以用不同的观点来解决这个问题

您可以扩展widget autocomplete插件，并通过覆盖
\u renderMenu
函数将自定义页脚添加到autocomplete列表中

代码：

$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“计划”]；
$.widget（“custom.autocompletefooter”，$.ui.autocomplete{
_renderMenu：功能（ul，项目）{
var self=这个；
$。每个（项目、功能（索引、项目）{
自我评估（ul，项目）；
如果（index==items.length-1）ul.append（“
自动完成的页脚！！
”）；
});
}
});
$（“#标记”）.autocompletefooter({
资料来源：availableTags
});
});

文件：

演示：
这是一个css问题，或者您正在使用jQuery UI autocomplete搜索解决方案？它是jqueryui autocomplete的一部分，所以如果我可以用另一种方法解决它，我愿意接受。如果我能用CSS来解决这个问题，那也没关系。如果我不清楚的话，很抱歉。页脚应该始终可见，而不仅仅是当您滚动到底部时。这是一个css问题，或者您正在使用jQuery UI autocomplete搜索解决方案？它是jqueryui autocomplete的一部分，因此如果我可以用另一种方法解决它，我愿意接受。如果我能用CSS来解决这个问题，那也没关系。如果我不清楚的话，很抱歉。页脚应该始终可见，而不仅仅是当你滚动到底部时。如果我不清楚，很抱歉。页脚应该始终可见，而不仅仅是当你滚动到底部时。如果我不清楚，很抱歉。页脚应该始终可见，而不仅仅是当您滚动到底部时。我希望我可以这样做，但我最终必须更改jqueryui自动完成代码以添加div。我希望我可以这样做，但我最终不得不更改jqueryui自动完成代码来添加div。我可能最终需要执行类似的操作并覆盖menu属性，以便它在ul周围添加div。我现在了解到页脚必须修复，我提供了一个
$(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
    });

});