在Chrome中,Ajax加载后页面不会调整大小

时间:2011-06-08 09:06:27

标签: javascript jquery css ajax google-chrome

我一直狂热地穿过我正在建造的网站的最后一段路线而且我只是遇到了奇怪的奇怪怪癖。 FF和IE似乎工作正常。

我正在使用jQuery来加载HTML存根,在这种情况下,来自外部博客的很多内容,但是当从真正很长的页面切换到非常短的页面时,我得到了大约一英里的未使用的页面仍然被添加到文件的结尾。

以下是加载存根的页面正文如下所示:

<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">&copy; 2011 Victory Barbers and Brand</div>
          </div>
        </div>
        <div id="fullWidthFooter"></div>
      </div>
    </div>
  </div>
</body>

我的所有加载都是使用jQuery load()完成的,我有一个没有这个问题的网站迭代。我一直在采用更宽100%的宽度风格,这个问题在这个过程中出现了。

我的问题是:在转移到不同/更短的内容时,有没有办法强制页面重新检查其大小?

7 个答案:

答案 0 :(得分:3)

我找到了解决方法。 (至少我没有看到它发生在几分钟内)。在.ajax回调中,在使用$('div').html(data);设置内容后,我使用$(window).resize();

调整整个窗口的大小

答案 1 :(得分:1)

我遇到的问题完全相同,我得到的答案是否定的。

我只是通过在加载AJAX后使用新内容检查新div的高度,并使用jQuery设置正确的高度来设法修复此问题。

如果有人能找到强制自动调整大小的方法,那将是非常好的,但同时无论内容量多少,此解决方案都能完美运行。

答案 2 :(得分:1)

我能够用css实际修复它。问题是我已经绝对定位了我的页面包装元素,因此它有效地位于身体元素流动之外。我删除了这个位置:绝对;顶部:0;左:0;然后放一个边框:0;和填充:0;在身体元素上。

答案 3 :(得分:0)

它应该是一个纯CSS问题,我自己没有使用jQuery for AJAX但是当调用内容时你会使用它吗?

document.getElementById('myDiv').innerHTML=myResult

或者你在使用jQuery

$('#myDiv').html(myResult);

$('#myDiv').append(myResult);

如果你使用jQuery,你应该首先清理div,如下所示:

$('#myDiv').html('');
$('#myDiv').html(myResult);

如果这没有帮助你可以使用固定高度并使用溢出css属性

     #myDiv {
       height:600px
       overflow:auto;
     }

当然,固定高度并不总是最佳解决方案,但它可能对您有帮助。

答案 4 :(得分:0)

如果推动推进,你可以随时用一些javascript强制加载高度。

我尽量远离position:absolute

答案 5 :(得分:0)

您可以使用css解决:

#myDiv{max-height:value; overflow:auto;}

答案 6 :(得分:-2)

<强> asyncBoolean

默认值:true

默认情况下,所有请求都是异步发送的(默认情况下设置为true)。如果需要同步请求,请将此选项设置为false。跨域请求和dataType:“jsonp”请求不支持同步操作。请注意,同步请求可能会暂时锁定浏览器,并在请求处于活动状态时禁用任何操作。“