javascript - Firefox box-sizing + expanding div = missing padding?

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 上它可以正常工作。

似乎 Firefox 在这里做了一些错误的计算？或者 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>