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