javascript - 如何在父div中创建一个固定的div - Thinbug

如何在父div中创建一个固定的div

时间：2012-02-14 14:00:43

标签： 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">
            <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>

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

2 个答案:

答案 0 :(得分：2)

描述

您不需要javascript，您可以使用css和position:fixed在纯bottom:0px中执行此操作。

查看我的示例和此jsFiddle Demonstration

示例

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

更多信息

答案 1 :(得分：0)

你必须给div项目一个固定的高度，CSS中有overflow:auto。当div中的内容变得大于div本身时，这将启用滚动。因此，您将滚动列表，但除了项目的子项外，所有其他div都会保留在原位。