Question

我一直试图通过box-sizing和padding来解决这个问题，即我有一个扩展div（随着时间的推移添加了内容）。提到的案例在ie和Chrome上运行良好，但在Firefox（33.0.2）上表现得很奇怪。

这是链接

按住按钮。该按钮将通过以下方式将您发送到页面末尾：

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

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

看起来Firefox正在做一些错误的计算？或者int不会为扩展/动态内容计算填充？我错过了一点吗？

我正在寻找一个quickfix。

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>

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

1 个答案: