Javascript 如何在父div中创建固定div_Javascript_Jquery_Css_Css Float

Javascript 如何在父div中创建固定div

javascript jquery css

Javascript 如何在父div中创建固定div,javascript,jquery,css,css-float,Javascript,Jquery,Css,Css Float,以下是我的设计： <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> </head> <body> <div id="wrapper"> <div id="head"> </div> <div id="content"> &l

以下是我的设计：

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
</head>
<body>
    <div id="wrapper">
        <div id="head">
        </div>
        <div id="content">
            <div id="items">
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
                    <li>Item5</li>
                    .....
                </ul>
            </div>
            <div id="items-footer">
                <input type="text"/>
            </div>
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>



项目1
项目2
项目3
项目4
项目5
.....

我有页眉、正文和页脚。在正文中，我有几个要显示的项目，在这些项目下面有一个项目页脚，其中包含文本框，用于在该列表中添加动态项目。我的要求是，当用户滚动项目时，如何使固定div保持在底部（就在页脚上方）。我希望“items footer”始终显示在视图端口中。

您必须为div项指定一个固定高度，并在CSS中使用

溢出：auto

。这将在div中的内容大于div本身时启用滚动。因此，您将在列表中滚动，但除项目的子项外，所有其他div都保持不变。

Description 您不需要

javascript

，您可以使用

position:fixed

和

bottom:0px

在纯

css

中执行此操作

看看我的样品和这个

样品更多信息

但在这种情况下，浮动div也位于页脚上方。

#items-footer {
  position: fixed;
  bottom: 0px;  
}