Menu
I've been feverishly CSSing my way through the final leg of a site I'm building and I'm running into an odd quirk with Chrome only. FF and IE seem to work fine.
I am using jQuery to load HTML stubs and in this case a lot of content from an external blog, but when switching from the really long pages to the really short ones I get about a mile of unused page still tacked on to the end of the document.
Here's what the body of the page where the stubs are being loaded into looks like:
<body>
<div id="page">
<div id="mainWrapper">
<div id="headerFullWidth"></div>
<div id="fixedwidthcontainer">
<div id="header">
<div id="logo"><img src="images/logo.png" height="85px" width="187px"></div>
<div id="shoppingcart"></div>
</div>
<div id="shoppingCartIcon"></div>
</div>
<div class="contentSpacer"></div>
<div id="contentwrapper">
<div id="content"></div>
</div>
<div class="contentSpacer"></div>
<div id="footer">
<div id="footerContent">
<a href="#contactPopupContent" id="contactfooter">Contact Us</a><a href="#privacyPopupContent" id="privacyfooter">Privacy Policy</a><a href="#shippingPopupContent" id="shippingfooter">Shipping & Returns</a>
<div id="copyrightfooter">© 2011 Victory Barbers and Brand</div>
</div>
</div>
<div id="fullWidthFooter"></div>
</div>
</div>
</div>
</body>
All of my loads are done using jQuery load() and I have had an iteration of the site that didn't have this problem. I have been moving to a more 100% width style and this problem emerged in the process.
My question is this: is there a way to force the page to re-check its size when moving to different/shorter content?
920
I think I've found a solution to this. (At least I haven't seen it happen in a few minutes). In the .ajax callback, after setting the content with $('div').html(data);, I resize the entire window with $(window).resize();
59
Exactly same problem I encountered, and the answer I came about is no.
I only managed to fix this by checking the height of the new div with the new content after AJAX load, and setting the correct height with with jQuery.
It would be really good if someone could find a way to force an auto resizing, but meanwhile this solution worked perfectly regardless of the amount of content.
1
I was able to fix it actually with just the css. the problem was that I had absolute positioned my page wrapper element so it was effectively sitting outside of the body element flow wise. I removed the position:absolute; top:0; left:0; and just put a border:0; and padding:0; on the body element.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
