javascript - Chrome treating CSS quite particularly -


i have css layout works fine in both firefox/opera , in safari, in chrome behaves differently.

i have usual:

* { margin: 0; padding: 0; }  html, body { height: 100%; }  div#container {     min-height: 100%;     width: 1000px;      /* giving page fixed width */     margin: 0 auto;     /* centering page */     position: relative; /* making footer stop when meets content */ } 

now, works fine except when refresh page in chrome. in other browsers, when refresh page content adapts , (if height of page isn't less minimum height of content) don't have scroll down see whole page. in chrome, when refresh page becomes bigger screen , have scroll down see all. note content shouldn't problem because not exceed height of main section.

the html layout basically:

<body>     <div id="container">          <header>stuff...</header>          <section id="page_content">stuff...</section>          <footer>stuff...</footer>     </div> </body> 

and, if can help, css of main content is:

section#page_content {     height: 100%;       /* pay attention: height handled */     min-height: 400px;  /* jquery code, resizes dynamically */     max-height: 1000px;     width: 802px;     margin: 0 auto;     display: block;     overflow: auto; } 

and js function called every time page resized and when page loads:

function resizemainsection() {     var finalheight = $(window).height()         - $('footer#page_footer').outerheight(true)         - $('header#page_header').outerheight(true) // simple div stop footer going on content when resizing         - $('div#footer_stopper').outerheight(true);     var mainsection = $('section#page_content');      if (finalheight < mainsection.css('min-height')         || finalheight > mainsection.css('max-height')) return;     $(mainsection).height(finalheight); } 

what possible causes?

edit

i noted when refresh page (through cmd+r or through refresh button) issue. if re-insert same url browser , click enter layout styled correctly. maybe it's cache problem suggested in comments.

i think better script change end from

if (finalheight < mainsection.css('min-height')     || finalheight > mainsection.css('max-height')) return; $(mainsection).height(finalheight); 

to:

if (finalheight < mainsection.css('min-height')      finalheight = mainsection.css('min-height'); if (finalheight > mainsection.css('max-height')     finalheight = mainsection.css('max-height'); $(mainsection).height(finalheight); 

that height value constrained min , max values. if calculated value below min, apropiate action set min, not exit script


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -