Firefox填充底部框大小：边框框[重复]

Question

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

#foo{
          width: 200px;
          height: 200px;
        }
        
        #bar{
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          padding-top: 20px;
          padding-bottom: 50px;
          overflow: auto;
          background-color: yellow;
        }

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

Answer 1

您可以在父元素中再添加一个 div 并将 padding-bottom 添加到其中。试试这个代码。

CSS

#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;
}

HTML

<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>