AJAX頁面加載，但DIV沒有擴大到適合其內容

Question

我想加載到AJAX的內容到一個空的但div不會調整大小的內容被加載。相反，它看起來像它重疊的空白div像Z索引的影響。

是否有一些關於設置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。

對於一個相關的例子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

我結束了在包裝一個新的div ajax的內容和設置內容填充和files_right_pane以高度的高度：自動;

感謝您的提示和幫助球員