Question

我正在尝试将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');

这有什么影响吗？

Answer 1

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

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

Answer 2

s2xi，

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

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

如果看起来很糟糕，请尝试

overflow:scroll// it will show scroll barks

Answer 3

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

感谢您的提示和帮助人员

AJAX页面加载但DIV没有扩展以适应其内容

3 个答案: