eremcruibia
New Member
I have this CSS layout which works fine in both Firefox/Opera and even in Safari, but in Chrome behaves slightly differently.I have the usual:\[code\]* { margin: 0; padding: 0;}html, body { height: 100%;}div#container { min-height: 100%; width: 1000px; /* giving the page a fixed width */ margin: 0 auto; /* centering the page */ position: relative; /* making the footer stop when it meets the content */}\[/code\]Now, everything works fine except when I refresh the page in Chrome. In all the other browsers, when I refresh the page the content adapts itself and (if the height of the page isn't less than the minimum height of the content) I don't have to scroll down to see the whole page. In Chrome, when I refresh the page becomes bigger than the screen and I have to scroll down to see it all. Note that the content shouldn't be the problem because it does not exceed the height of the main section.The HTML layout is basically:\[code\]<body> <div id="container"> <header> stuff... </header> <section id="page_content"> stuff... </section> <footer> stuff... </footer> </div></body>\[/code\]And, if it can help, the CSS of the main content is:\[code\]section#page_content { height: 100%; /* pay attention: height is actually handled */ min-height: 400px; /* by the jQuery code, which resizes it dynamically */ max-height: 1000px; width: 802px; margin: 0 auto; display: block; overflow: auto;}\[/code\]And also this JS function is called every time the page is resized and when the page loads:\[code\]function resizeMainSection() { var finalHeight = $(window).height() - $('footer#page_footer').outerHeight(true) - $('header#page_header').outerHeight(true) // a simple div to stop the footer from going over the 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);}\[/code\]What are the possible causes?