我有一个很高的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>
答案 0 :(得分: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>
答案 1 :(得分:1)
一般来说,当你绝对定位一个元素时,它就会脱离DOM的结构。这意味着需要“空间”自己的其他元素不会意识到它的存在。
话虽如此,我找不到任何关于铬如何/为什么实际渲染边际的解释。
在任何情况下,您都可以使用:after
伪类在末尾添加边距。
.myDiv:after {
position: absolute;
content: '';
bottom: -5px;
height: 100%;
width: 1px;
}
您还需要从实际div中删除margin-bottom
,因为它会在chrome中添加双边距。 Firefox需要width: 1px;
来呈现:after
元素。