2 つの要素のいずれかが最大の高さになるように設定します。ウィンドウ、サイドバー、#primary コンテナーの高さを確認し、設定したすべての要素の高さが最大のものであることを確認しています。ただし、このページでは、選択ボタンを操作すると ajax の負荷が発生します。その後、私のページの高さが増加します。関数によって新しい高さが取得されることを期待していましたが、Ajax ロード前の古い高さが返されます。
私のコードは以下の通りです:
//on change of the select button load ajax content, then run changeSidebarHeight()
$('#choose-pathway').change(function() {
var url=$(this).val();
$('#ajax-pathway-container').load(url + ' #pathway',changeSidebarHeight);
});
function changeSidebarHeight(){
var primaryHeight=$('#primary').height();
var sidebarHeight=$('#sidebar').height();
var windowHeight=$(window).height();
//this always returns the same value, before the ajax load and after, despite the page being about 600 pixels taller
console.log($('html').height());
if(primaryHeight > sidebarHeight){
$('#sidebar').height(primaryHeight );
}else{
$('#sidebar').height(windowHeight );
$('#primary').height(windowHeight);
}
}