İletişim kutusuyla jQuery UI iletişim kutusunda yeniden boyutlandırın?

Question

jQuery UI iletişim kutusu iki div öğesinden oluşur. Biri sabit bir yüksekliğe sahiptir ve diyalogun alt kısmında her zaman hizalanmalıdır. Diğeri kalan alanı almalı.

Temelde bütün boyutlar boyutlandırmak değişmeden kalmasını mavi renkle vurgulanmıştır istiyorum. Ya da, başka bir deyişle, kırmızı div her iki boyutta yeniden boyutlandırır, ancak yeşil div onun boyunu korur.

JQuery UI'sinde veya hatta düz CSS'de bunu yapmanın en kolay yolu nedir?

Answer 1

Herhangi bir JavaScript kullanmayan bir yolunu buldum. Herhangi bir hack bile içermez; sadece normal normal CSS3. Burada Fiddle: http://jsfiddle.net/nty5K/16/

Temelde, her iki div'ler position: absolute vardır ve tarafların her top, bottom, left ve right özelliklerini kullanarak bireysel olarak sabitlenir. Üst div, belirtilen dört pozisyona sahiptir ve konteynerin her bir kenarına tam mesafeyi korurken konteynırla yeniden boyutlandırır. Alt div sabit konumlardan üç tanesine sahiptir, oysa üst kısım sadece dolaylı olarak sabit bir yükseklik ile tanımlanmıştır. Pratikte, divlerin position: relative olan bir sarmalayıcı div içine yerleştirilmesi gerekecektir, aksi takdirde üst/alt divler vücut elemanına göre konumlandırılacaktır.

Tarayıcı uyumluluğu konusunda henüz emin değilim, ancak bu özellik Firefox 10, IE9 ve Chrome 17'de sorunsuz çalıştı. Bunu daha önceki sürümlerinde test etmediniz.

Answer 2

Hemen CSS ... check it out!

Set kaba bir margin ve div sabit alt bir margin-top. Hayır jQuery gerekli.

Answer 3

Şirket güvenlik duvarı görüntüleri engelliyor, bu yüzden diğer yorumlara göre neyin peşinde olduğunuzu tahmin ediyorum.

DÜZENLEME: Artık neyin peşinde olduğunu görebiliyorum, kemanımı buna göre güncelledim. Bütünlük için aşağıdaki kodu içerir.

İletişim kutusunun boyutunu hesaplamak, sabit div'in yüksekliğini çıkarmak ve dinamik div'in yüksekliğini bu hesaplanmış değere ayarlamak için bir işlev yazabilirim. Bu işleve bir çağrıyı iletişim kutusunun yeniden boyutlandırma olayına bağlardım. Here bir keman, kesin düzeniniz için biraz ayarlamaya ihtiyaç duyabilir, ancak yakın olmalıdır.

Bazı özellikler bir kaydırma/yeniden boyutlandırma olayının ortasındayken bazı tarayıcıların doğru bir şekilde hesaplanamayacağı, setTimeout ile yeniden boyutlandırma olayının tamamlanmasından sonra gerçekleşecek hesapların sıraya konulmasının sorunların çözülmesine yol açmasıdır. Yeniden boyutlandırma devam ederken biraz tempolu değiştirmek. Bu question'a bakın ve ayrıntıları için cevap verin.

function SetDivHeight() { 
    var $DynamicDiv = $('div.dynamic'); 
    var $FixedDiv = $('div.fixed'); 
    var $Container = $(window); //Update for containing element 

/*Calculate the adjustment needed to account for the margin and 
border of the dynamic div.*/ 
    var HeightAdjustment = $DynamicDiv.outerHeight(true) - $DynamicDiv.height(); 

/*Get the values of the top and bottom margins which overlap 
between the two divs.*/ 
    var DynamicBottomMargin = parseInt($DynamicDiv.css('marginBottom')); 
    var FixedTopMargin = parseInt($FixedDiv.css('marginTop')); 

/*Adjust for the overlapping top/bottom margin by subtracting 
which ever is smaller from the adjustment value.*/ 
    if (DynamicBottomMargin >= FixedTopMargin) { 
     HeightAdjustment -= FixedTopMargin; 
    } else { 
     HeightAdjustment -= DynamicBottomMargin; 
    } 


/*subtract the height of the fixed div from the height of the 
container, subtract the calculated height adjustment from that 
value, and set the result as the height of the dynamic div.*/ 
    $DynamicDiv.height(($Container.height() - $FixedDiv.outerHeight(true)) - 
HeightAdjustment); 
/*May need to use $Container.innerHeight instead, if container 
is not a window element.*/ 
} 

var t; 

function QueueSetDivHeight() { 
    if (t) { 
     clearTimeout(t); 
    } 
    t = setTimeout(function() { 
     SetDivHeight(); 
    }, 0); 
} 

$(document).ready(function() { 
    SetDivHeight(); 
    $(window).resize(QueueSetDivHeight); 
    //Bind to resize of container element instead/as well 
});