html - 确保 HTML 元素距离页面底部 300 像素，没有空格

Question

我的input页面底部有一个，如下所示：

这个输入有一个动态出现的下拉列表（这是一个包含<div>a <ul>），即

由于此输入位于页面底部附近，因此当下拉菜单出现时，它需要用户向下滚动以查看整个下拉列表，我不想这样做，方法是确保页面末尾至少有 300px 高度从底部input。我已经尝试过这样做margin-bottom- 但是这会在我的分页之前留下 300px 的空白（显然！）这是我不想要的。

我真正想做的是在z-index:1图层上给它一个底部边距，允许其他元素坐在这个边距空间中，但要确保在页面结束之前有 300px。有什么建议么？

（输入是position:static，所以bottom不能用，我不觉得？）

Answer 1

您可以将 a 添加margin-bottom: 300px到您的分页中，并通过将下拉位置设置为position: absolute; top: 40px;并将其尺寸设置为类似width: 100%; height: 300px.

不要忘记添加position: relative到下拉列表的父元素。

我希望这有帮助。

Answer 2

尝试使下拉菜单出现在输入字段上方。

如果这很笨拙，请将输入设置为不可编辑的元素，并在用户单击它时显示一个弹出窗口。将弹出窗口定位在页面的更上方。

如果这也很笨拙，请记住滚动位置，然后在用户开始编辑时创建 300px 的边距，向上滚动页面。编辑后，删除边距并再次向下滚动。