jQuery Load() 没有形成 DIV

Question

嘿，我在 div 中使用 jQuery 的 load() 函数加载 HTML 页面时遇到了一些问题。如果我的 HTML 页面中的内容大于（更大的高度） 比它最初进入的 DIV，那么它只会在潜水时流血。

这是我在 DIV 上使用 jQuery load() 后页面的样子：

加载后应该是这样的：

这是我的 HTML DIV 代码的样子：

 <div class="container_1" id="mainHTML">  
  <div class="pageinner" id="innerHTML">
    <p style="font-size: 24px;" class="MMHeader">The CMS System<p>
    <p style="color: #F90;" class="mmBelowHeader">Please provide your email and password below in order to log into the CMS system.<p>
        <section class="main" id="mainContent">
            <div class="form-4">
                <p>
                    <input type="text" name="username" id="username" placeholder="Email Address">
                </p>
                <p>
                    <input type="password" name='password' id="password" placeholder="Password"> 
                </p>

                <p>
                    <button class="orange" name="forgotLoginButton" id="forgotLoginButton" onclick="shrinkBox();" style="margin-right: 5px;">Forgot Password</button>
                    <button class="blue" name="LoginButton" id="LoginButton" onclick="mainMenu();" >Log in</button>
            </div>​
        </section>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#mainHTML").animate({width:500, height: 300, overflow: 'auto'});
    $("#innerHTML").animate({width:470, overflow: 'auto'});
    $(".form-4").animate({margin: '10px auto 10px', overflow: 'auto'});
    $('#mainContent').load('test.html');
});
</script>

我确定这是因为我正在为框的宽度/高度设置动画，但是有一种方法可以将加载的内容保持在 DIV 内并根据加载的内容调整其高度？？

更新

$('#mainContent').fadeOut(0).load('test.html', function() {
    $('#mainHTML').animate({width:940, height: 'auto'});
    $("#innerHTML").animate({width:940, overflow: 'auto'});
}).fadeIn(2000);

但它确实不将 div 的大小调整为加载的 html 内容的高度？

Answer 1

检索数据后尝试重置#mainHTML的高度：

$('#mainContent').load('test.html', function() {
  $("#mainHTML").stop().css({height: 'auto'});
})

http://jsfiddle.net/KzEpL/
http://jsfiddle.net/KzEpL/1/