1

こんにちは、div内でjQueryのload（）関数を使用してHTMLページをロードする際に問題が発生しています。HTMLページ内に元々入っているDIVよりも大きい（高さが大きい）コンテンツがある場合、それはダイビングでブリードします。

これは、DIVでjQuery load（）を使用した後の私のページの外観です。

jqueryロード

ロードすると次のようになります。

jqueryロード2

これは私のHTMLDIVコードがどのように見えるかです：

 <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コンテンツに高さ方向にサイズ変更しませんか？

4

1 に答える 1

0

#mainHTMLデータを取得した後、高さをリセットしてみてください。

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

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

于 2012-11-28T23:50:39.973 に答える