html - 屏幕底部元素和向下滚动位置 : ff vs chrome

Question

我有一个高度很大的 div。高度优于窗口高度，所以向下滚动显示在屏幕右侧:

div 的底部边框与显示区域的底部完美匹配:

不过，我需要显示更多内容，因为我允许用户调整此 div 的大小，并且他们需要一些空间来悬停底部边框。

我所做的是添加一个 5px 的底部边距，它在 Chrome 中有效:

但 Firefox 或 IE11 对此根本没有反应。

我能做什么？

随机代码说明:

底部没有空间:

<div style="position: absolute; border: 1px dotted silver; width: 20px; height: 2000px; margin-bottom: 0px"><div>

底部的空间仅适用于 chrome:

<div style="position: absolute; border: 1px dotted silver; width: 20px; height: 2000px; margin-bottom: 5px"><div>

fiddle :http://jsfiddle.net/ynjuwqez/1/

Answer 1

您可以添加一个高度相同但向下移动一点的伪元素:

div:after {
  content: '';        /* enable the pseudo-element */
  position: absolute; /* absolutely positioned (relatively to target) */
  height: 100%;       /* as tall as the target */
  width: 1px;         /* some width */
  margin-top: 5px;    /* this will produce some space at the bottom */
  z-index: -1;        /* hide it behind the background */
}

div {
  position: absolute;
  border: 1px dotted silver;
  width: 20px;
  height: 2000px;
}
div:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 1px;
  margin-top: 5px;
  z-index: -1;
}

<div></div>