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/