jQuery Load()未形成DIV

Question

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

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

​

​

加载时应该是这样的：

​

​

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

 <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/