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


i've been trying solve issue have expanding div (as content added on time) box-sizing , padding. mentioned case works fine on ie , chrome, behaves weird on firefox (33.0.2).

here link

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

keep pressing button. button send end of page via:

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

after page filled, , scroll appears, see osme reason padding-bottom stay out of page - on firefox! on chrome , ie works should.

it looks firefox making wrong calculation somhere? or int not calculate padding @ all, expanding/dynamic content? missing point?

i'm looking quickfix.

$("#button").click(    function(event){      event.preventdefault();      var newdiv = $("<div>");      newdiv.text("here 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>


Comments

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -