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);
       });
     });
    }

UPDATE:

возможно, я должен указать, что у меня есть этот 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.Это заставит его расширяться для хранения плавающих левых и правых дочерних элементов.

Для соответствующего примера см. Мой ответ на этот другой вопрос SO

Answer 2

В итоге я обернул содержимое ajax в новый div и установил высоту content-fill и files_right_pane в height: auto;

Спасибо за советы и помогите ребята

Answer 3

s2xi,

если ребенок не занимает ширину родителей, попробуйте это

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

если это выглядит плохо, попробуйте

overflow:scroll// it will show scroll barks