Hacer un div anidado en un diálogo de interfaz de usuario jQuery cambiar el tamaño con el cuadro de diálogo?

Question

Mi jQuery UI cuadro de diálogo contiene dos elementos div. Uno tiene una altura fija y debe estar alineado en la parte inferior del diálogo en todo momento. El otro debería ocupar el espacio restante.

Básicamente me gustaría todas las dimensiones marcadas en azul se mantenga sin cambios en el cambio de tamaño. O, en otras palabras, el div rojo se cambia de tamaño en ambas dimensiones pero el div verde mantiene su altura.

¿Cuál es la forma más fácil de hacer esto en jQuery UI o simplemente con CSS simple?

Answer 1

He encontrado una manera de hacer esto que no utiliza JavaScript. Ni siquiera implica ningún hackeo; simplemente normal CSS3. Violín aquí: http://jsfiddle.net/nty5K/16/

Básicamente, los dos divs son position: absolute, y cada uno de los lados está anclado de forma individual utilizando los top, bottom, left y right propiedades. El div superior tiene las cuatro posiciones especificadas, lo que le permite cambiar el tamaño del contenedor y preservar la distancia exacta a cada borde del contenedor. El div inferior tiene tres de las posiciones fijadas, mientras que el superior se define solo indirectamente, a través de una altura fija.

En la práctica, los divs deberán colocarse en un div envoltorio que tenga position: relative, de lo contrario los divs superior/inferior se colocarán en relación con el elemento del cuerpo.

Aún no estoy seguro acerca de la compatibilidad del navegador, pero esto funcionó bien en Firefox 10, IE9 y Chrome 17. No probé esto en versiones anteriores.

Answer 2

Sólo CSS ... check it out!

Establecer un margin al contenedor y una margin-top a la parte inferior fija div. No se requiere jQuery.

Answer 3

El cortafuegos corporativo bloquea las imágenes, por lo que supongo que lo que está buscando en base a otros comentarios.

EDIT: Ahora que puedo ver lo que buscas, he actualizado mi violín en consecuencia. Incluyendo el código a continuación para completar.

Escribiría una función para calcular el tamaño del diálogo, restar la altura del div fijo y establecer la altura del div dinámico a este valor calculado. A continuación, enlazaré una llamada a esta función con el evento de cambio de tamaño del cuadro de diálogo. Here es un violín, puede necesitar algunos ajustes para su diseño exacto, pero debe estar cerca.

Una cosa que vale la pena observar es que algunos navegadores pueden no calcular correctamente mientras están en medio de un evento de desplazamiento/cambio de tamaño, haciendo que los cálculos ocurran después de que el evento de cambio de tamaño se complete con setTimeout resuelve los problemas, aunque hace que el cambie un poco nervioso mientras el cambio de tamaño está en progreso. Vea esto question y responda para más detalles.

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