jquery - AJAX 页面加载但 DIV 未扩展以适合其内容

Question

我正在尝试将 AJAX 内容加载到空中，但 div 不会调整大小以适应正在加载的内容的大小。相反，它看起来像是与空 div 重叠，就像 z-index 影响一样。

有一些关于设置 div 的指南吗？

这是我的设置:

我的 XHTML:

<div id="wrap">
    <div id="main-content">
        <div id="content-fill">
            <div id="files_left_pane">static content</div>
            <div id="files_right_pane">ajax content</div>
        </div>
    </div>
</div>

我的CSS:

* { padding: 0; margin: 0; }
#wrap {
    position: relative;
    margin: 0 auto;
    width: 955px;
    padding: 0px;
    border-left: 1px solid #BDBDBD;
    border-right: 1px solid #BDBDBD;
    border-bottom: 1px solid #BDBDBD;
}
#content-fill { }
#files_left_pane { float: left; height: 100%; }
#files_left_pane { float: left; height: 100%; }

这是处理 AJAX 的代码:

    function cabinet_tabs(){

        $(".tab_content").hide(); //Hide all content
        $("#files_left_pane > ul.tabs li:first").addClass("active").show(); //Activate first tab
        $("#files_right_pane > .tab_content:first").show(); //Show first tab content
        //On Click Event
        $("#files_left_pane > ul.tabs li").live('click', function() {
            $("#files_left_pane > ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $("#files_right_pane > .tab_content").hide(); //Hide all tab content

            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });
        $("#files_right_pane > table.zebra tr:even").addClass('alt');

        // AJAX
       $('.view-prospects').live('click', function(){
       $.post('resources/ajax/ajax.php', {
           action : 'prospects',
           uid : uid
       }, function(data){
           $('#files_right_pane > #prospects').html(data);
       });
     });
    }

更新:

也许我应该指出，我有这个 js 代码，它通过 ajax 加载到我的导航页面中，并调整 #main-contnet div 的大小以适应内容。在 #main-content div 中，#content-fill 是从这些链接加载的。

//------------------------------------------------------------------
// Hash Change and delegation of menu links
//------------------------------------------------------------------
var newHash      = "",
    $mainContent = $("#main-content"),
    $pageWrap    = $("#wrap"),
    baseHeight   = 0,
    $el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $mainContent.height();
$(".nav_profile_menu > a.hash").delegate("a", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;
});
$(window).bind('hashchange', function(){
    newHash = window.location.hash.replace( /^#/, '' );
    if (newHash) {
        $mainContent
            .find("#content-fill")
            .fadeOut(200, function() {
                $mainContent.hide().load(newHash + " #content-fill", function() {
                    $pageWrap.animate({
                        height: baseHeight + $mainContent.height() + "px"
                    });
                    cabinet_tabs();
                    $mainContent.fadeIn(900);
                });
            });
    };
});
$(window).trigger('hashchange');

这有什么影响吗？

Answer 1

尝试将 overflow:hidden; 添加到您的 #content-fill div。这将迫使它展开以容纳 float 的左右子 div。

相关示例 see my answer on this other S.O. question