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
Post a Comment