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

【问题标题】：AJAX page loading but DIV not expanding to fits its contentAJAX 页面加载但 DIV 未扩展以适合其内容
【发布时间】：2010-12-06 05:52:20
【问题描述】：

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

是否有一些关于设置 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');

这有什么影响吗？

【问题讨论】：

@s2 ，你有没有尝试过溢出属性的

标签： jquery ajax

【解决方案1】：

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

对于一个相关的例子see my answer on this other S.O. question

【讨论】：

【解决方案2】：

s2xi,

如果孩子没有占据父母的宽度，试试这个

#files_left_pane { float: left; height: 100%; width:100% }

如果看起来不好，请尝试

overflow:scroll// it will show scroll barks

【讨论】：

也不占父母身高，这是我的问题
@s2xi ，然后给子元素 100%width ，它肯定会占据父元素的宽度

【解决方案3】：

我最终将 ajax 内容包装在一个新的 div 中，并将 content-fill 和 files_right_pane 的高度设置为 height: auto;

感谢您的提示和帮助

【讨论】：