Interesante función que permite ajustar la altura de un conjunto de cajas a la altura de la más alta de todas ellas.
function mySameHeight(elt) {
var heightBlockMax=0;
var propertie = (jQuery.support.opacity) ? "min-height" : "height";
jQuery(elt).each(function(){
var height = jQuery(this).height();
if( height > heightBlockMax ) {
heightBlockMax = height;
}
});
jQuery(elt).css(propertie, heightBlockMax);
}
Un ejemplo de uso podría ser el siguiente:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript">
function mySameHeight(elt) {
var heightBlockMax=0;
var propertie = (jQuery.support.opacity) ? "min-height" : "height";
jQuery(elt).each(function(){
var height = jQuery(this).height();
if( height > heightBlockMax ) {
heightBlockMax = height;
}
});
jQuery(elt).css(propertie, heightBlockMax);
}
$(document).ready(function() {
mySameHeight('.dest');
});
</script>
<style type="text/css">
#box1{
display:block;
float:left;
width:200px;
padding:5px;
background-color:#060;
color:#FFF;
}
#box2{
display:block;
float:left;
margin-left:10px;
width:200px;
padding:5px;
background-color:#900;
color:#FFF;
}
</style>
<div id="box1" class="dest">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porttitor vehicula nulla at placerat. Phasellus vitae leo nec nibh fermentum dictum. </div>
<div id="box2" class="dest">Quisque id mi turpis, et viverra dolor. Integer auctor adipiscing enim non vulputate. Quisque vitae ipsum sem. Vestibulum ullamcorper sodales aliquam. Cras viverra sollicitudin ipsum ultrices consequat. Suspendisse euismod vulputate posuere. Fusce semper vehicula ligula, sed scelerisque lorem pellentesque ac. </div>