Firefox padding bottom box-sizing: 边框框

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>

Firefox padding bottom box-sizing: 边框框

Firefox padding bottom box-sizing: border-box

html

css

firefox

padding

border-box