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

Question

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

此输入有一个动态显示的下拉列表(这是一个 <div> 包含一个 <ul> )，即

由于此输入靠近页面底部，因此当出现下拉菜单时，它需要用户向下滚动才能看到整个下拉菜单，而我不想这样做，方法是确保页面末尾至少是距 input 底部 300 像素高度.我试过使用 margin-bottom 来做到这一点- 然而，这在我的分页之前留下了 300 像素的空白(显然!)，这是我不想要的。

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

(输入是 position:static ，所以 bottom 不能使用，我不认为？)

Answer 1

您可以将 margin-bottom: 300px 添加到您的分页，并通过将下拉列表位置设置为 position: absolute; 使下拉菜单弹出分页； top: 40px; 并且它的尺寸类似于 width: 100%;高度:300px。

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

希望对您有所帮助。