Html Firefox填充底部框大小：边框框

我们有一个简单的父元素，里面有一个子元素。子元素的内容比父元素大，所以我们需要一个滚动条。我们想在底部添加一些填充，但Firefox（60.0.2）似乎忽略了这一点。这是虫子吗？在Chrome中，它似乎工作正常

#foo{
宽度：200px；
高度：200px；
}
#酒吧{
框大小：边框框；
宽度：100%；
身高：100%；
填充顶部：20px；
填充底部：50px；
溢出：自动；
背景颜色：黄色；
}

测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

您只需在父元素中再添加一个div，然后向其添加

填充底部。试试这个代码

CSS

HTML


测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试

这可能会对您有所帮助-
#foo {
  width: 200px;
  height: 200px;
}

#bar {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}

.inner {
  padding-top: 20px;
  padding-bottom: 50px;
}

<div id="foo">
  <div id="bar">
    <div class="inner">
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    </div>
  </div>
</div>