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

【问题标题】：Ensure HTML element is 300px from page bottom, without empty space确保 HTML 元素距离页面底部 300 像素，没有空格
【发布时间】：2013-08-19 18:55:27
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： html css

【解决方案1】：

您可以将margin-bottom: 300px 添加到您的分页中，并通过将下拉位置设置为position: absolute; top: 40px; 并将其尺寸设置为width: 100%; height: 300px 来使下拉列表弹出分页。

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

我希望这会有所帮助。

【讨论】：

分页上的边距底部需要 300px 减去分页高度（包括分页和下拉列表底部之间的空间）。此外，无论如何，下拉菜单应该出现在分页上方，没有绝对定位。
如果分页和下拉菜单都是静态定位的，下拉菜单会下推分页。这可能会导致浏览器滚动条出现。至于 300px 减去高度，你是绝对正确的。之后可能需要调整边距值。
一个开放的下拉字段 (<select>) 在元素流之外，它不会将其他元素推开。看一个例子：jsfiddle.net/qMjMh Dropdowns 有很多基于浏览器的原生行为。
我很确定有问题的下拉列表是包含多个其他行的 <div> 元素，而不是 <select> 元素。
下拉列表是 <div>，其中包含 <ul> - 抱歉，我没有说清楚。

【解决方案2】：

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

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

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

【讨论】：

感谢您的想法，我想我会避免第一对，因为我有许多这样的下拉菜单，并且希望在所有这些下拉菜单中保持活动一致。（虽然我没有提到，道歉！）最后一个想法是有希望的，我会玩一下，看看它是否太分散注意力！谢谢！