Высота div по содержанию

Question

У меня есть загрузка страницы в содержимом div, когда документ готов. Тем не менее, у меня также есть некоторые ссылки, которые загружают разные страницы в тот же самый контент div всякий раз, когда пользователь нажимает на них. Я пытаюсь установить высоту содержимого div для управления чем-то другим, однако, как только высота div устанавливается на загрузку страницы, я не могу получить новый размер содержимого div с новой страницей в нем ...

Например, загруженная страница - 6000 пикселей, страница 1 - 500 пикселей в высоту, а страница 2 - 300 пикселей в высоту. Когда страница загружается, для содержимого div установлено значение 6000 пикселей. Тем не менее, когда я нажимаю страницу 1, чтобы загрузить его в DIV содержимого, то ДИВО содержание остается равным 6000px, хотя само содержание только 500px в высоту, то же самое для страницы 2, и т.д ...

Вот HTML:

<div id="select"> 
    <div id="menu"> 
     <ul> 
     <li><a class="load" href="javascript:void(0)" id="page1">page1</a></li> 
     <li><a class="load" href="javascript:void(0)" id="page2">page2</a></li> 
     </ul> 
    </div> 
</div> 
<div id="spacer"></div> 
<div id="content"></div> 

Вот CSS:

#select { 
    width: 215px; 
    top: 20px; 
    left: 10px; 
    position: absolute; 
    } 

#spacer { 
    border-right:2px solid #000000; 
    left:10px; 
    width:215px; 
    position: absolute; 
    } 

#content { 
    left: 227px; 
    top: 20px; 
    width: 703px; 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    } 

Вот мой JQuery:

$(document).ready(function() { 
    //Load content on page load 
    $("#content").html('<ul><li>Loading Content...</li></ul>') 
       .load("/content/" + "projects.php", null, function() { 
          contentHeight = $("#content").height(); 
          selectHeight = $("#select").height(); 
          $("#spacer").height(contentHeight + "px") 
             .css({"top": selectHeight + 40 + "px" }); 
       }); 
    //Load content on click 
    $(".load").click(function(){ 
        loadName = $(this).attr("id"); 
        $("#content").html('<ul><li>Loading Content...</li></ul>') 
           .load("/content/" + loadName + ".php", null, function(){ 
            contentHeight = $("#content").height(); 
            selectHeight = $("#select").height(); 

            if(selectHeight < contentHeight) { 
            $("#spacer").css({"top": selectHeight + 40 + "px", "display": "block" }) 
               .height(contentHeight + "px"); 
            }else{   
            $("#spacer").css({"display": "none"}); 
            return; 
            } 
        }); 
    }); 
}); 

Answer 1

попробовать изменить событие на клик, а не «загрузить»

Answer 2

Вы пытались установить высоту на «авто»?

---

Edit: я посмотрел на то, что вы делали, и это было немного запутанным на первый (немного CSS помогло бы много). Мне было интересно, может ли не назначать переменную с помощью «var», что вызывает проблемы, но по какой-то причине этот скрипт всегда работал на меня.

Итак, я немного очистил код - я не был уверен, почему вы добавляли selectHeight каждый раз, поскольку это значение не должно меняться - вы можете просто справиться с этим в CSS, потому что абсолютное позиционирование не требуется ,

Итак, попробуйте это (никаких изменений в HTML, так что я не добавить):

CSS

#spacer { 
background: #555; 
float: left; 
width: 200px; 
margin-right: 20px; 
padding: 20px; 
} 
#content { 
background: #444; 
float: left; 
width: 1000px; 
padding: 20px; 
} 

Script

$(document).ready(function(){ 
//Load content on page load 
$("#content").html('<ul><li>Loading Content...</li></ul>') 
    .load("/content/" + "projects.php", null, function() { 
    $("#spacer").height($("#content").height() + "px"); 
    }); 

//Load content on click 
$(".load").click(function(){ 
    var loadName = $(this).attr("id"); 
    $("#content") 
    .html('<ul><li>Loading Content...</li></ul>') 
    .load("/content/" + loadName + ".php", null, function(){ 
    $("#spacer").height($("#content").height() + "px"); 
    }); 
}); 
}); 

Answer 3

Есть два варианта

1.) Вы можете сделать высоту всех страниц, которые хотите загрузить внутри содержимого div, как один размер из содержимого DIV

2.) Else по Jquery

сначала очистить правую содержимое DIV $ ('# содержание') удалить().

второй загрузить содержание анс установить высоту загруженного документа с помощью $ («# содержание») высота (...)

См:. http://api.jquery.com/height/