确保HTML元素从页面底部开始是300px，没有空格

Question

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

此输入有一个动态显示的下拉列表（<div>包含<ul>），即

由于此输入位于页面底部附近，当显示下拉列表时，它需要用户向下滚动以查看整个下拉列表，我希望通过确保页面结束至少是不需要的离input底部300px高度。我已尝试用margin-bottom执行此操作 - 但是在我的分页（显然是！）之前会留下300px的空白，这是我不想要的。

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

（输入为position:static，因此无法使用bottom，我不认为？）

Answer 1

您可以在分页中添加margin-bottom: 300px，并通过将下拉位置设置为position: absolute; top: 40px;并将其尺寸设置为width: 100%; height: 300px来使下拉菜单突然显示在分页上。

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

我希望这会有所帮助。

Answer 2

尝试让下拉列表显示在输入字段上方。

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

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