Question

我试图通过将所有四个边设置为具有一些值（顶部，右侧，底部，左侧）来使用绝对定位进行叠加。这个绝对定位的元素中有一个子元素，它具有高度和溢出自动。此元素的所有边都有填充。但遗憾的是忽略了底部的填充物。

仅在firefox浏览器中发生这种情况。 Chrome表现不错。有没有人知道如何解决这个问题？

这是代码

＆＃13;

 body {
   background: lightblue;
 }
 .abs {
   background: rgba(0, 0, 0, 0.5);
   position: absolute;
   top: 20%;
   bottom: 20%;
   right: 30%;
   left: 30%;
   padding: 40px;
   overflow: auto;
 }

＆＃13;

<!DOCTYPE html>
<html>

<body>
  <div class="abs">
    <div>
      asdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf
      asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf
      asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf
      asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf
      asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf
      asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf
      asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf
      asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf
      asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf
      safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas df
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 1

如果您将填充应用于内部<div>而不是应用填充到该文本底部的.abs。

Answer 2

好像它可能是Firefox上的scoller和padding系统的错误。导致child div内.abs滚动限制的原因。

到目前为止，我想出了一个解决方案来解决它。

body{
  background: lightblue;
}
.abs{
  background: rgba(0,0,0,0.5);
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 30%;
  left: 30%;
  padding: 40px;
  padding-bottom: 0;
  overflow: auto;
}

.abs div{
  padding-bottom: 40px;
}

<div class="abs">
  <div>
    asdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf as safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas dfasdf asdf asdf asdfasdf asdf asdf asdf asdf asfadf asdfsadfsadf safdasdfasfdas df
  </div>
</div>

覆盖padding-bottom上的.abs。我们稍后会在子div上设置它。

这会阻止chrome双重渲染2个元素的填充

编辑从CSS中删除评论。它搞乱了片段的输出。这意味着，在编辑之前它不起作用。

绝对定位项的子项忽略firefox中的底部填充

2 个答案: