Firefox box-sizing +扩展div =缺少填充？

Question

我一直在尝试用box-sizing和padding解决这个问题，因为我有一个扩展的div (因为内容是随着时间的推移而添加的)。上面提到的情况在ie和Chrome上运行良好，但在Firefox (33.0.2)上表现怪异。

这是链接

http://codepen.io/anon/pen/mydPdV

继续按这个按钮。该按钮将通过以下方式将您转到页面末尾：

$("#button").click(function(){
    $("#container").scrollTop(99999999999999999);
});

在页面填满后，滚动条出现，你会看到由于osme的原因，padding-bottom将不会出现在页面上--只在firefox上！在Chrome和IE上，它可以正常工作。

看起来火狐在这里做了一些错误的计算？或者int根本不计算扩展/动态内容的填充？我是不是漏掉了一点？

我在找一种速效药。

Answer 1

​

$("#button").click(
  function(event){
    event.preventDefault();
    var newdiv = $("<div>");
    newdiv.text("Here is some dummy content");
    $('#content').append(newdiv);

    //$('#container').prop('scrollHeight');
    var sh = parseInt($("#content")[0].scrollHeight);
    //$('body,html').animate({scrollTop:sh},1000);
    $(window).scrollTop(sh);
    //return false
  }
);

body{
  text-align: center;
  margin: 0;
  background-color: lightgray;
  width: 100%;
  height:100%;
}
#container{
  background: lightpink none repeat scroll 0 0;
  margin:5%;
  width: 90%;
  -webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		    box-sizing: border-box;
}
#button{
  padding: 16px;
  background-color: white;
  cursor: pointer;
}
#content div {
  background-color: #eee;
  margin-bottom: 8px;
  padding: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="content"></div>
  <div id="button">PRESS ME</div>
</div>

​