屏幕上的Bottomest元素和向下滚动位置：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>

小提琴：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>

Answer 2

一般来说，当你绝对定位一个元素时，它就会脱离DOM的结构。这意味着需要“空间”自己的其他元素不会意识到它的存在。

话虽如此，我找不到任何关于铬如何/为什么实际渲染边际的解释。

在任何情况下，您都可以使用:after伪类在末尾添加边距。

.myDiv:after {
    position: absolute;
    content: '';
    bottom: -5px;
    height: 100%;
    width: 1px;
}

您还需要从实际div中删除margin-bottom，因为它会在chrome中添加双边距。 Firefox需要width: 1px;来呈现:after元素。