Come impostare un'altezza 'div' uguale a quella del suo vicino?

Question

Sto usando bootstrap come framework CSS. Ora ho alcuni contenuti dinamici nel div laterale sinistro e alcuni contenuti statici nel div destro. Voglio all'altezza del lato destro div cambiare automaticamente la base sull'altezza del div laterale sinistro. È possibile?

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span5 offset1"> 
    <div class="well"> 
     Dynamic Content 
    </div> 
    </div> 
    <div class="span5"> 
    <div class="well" style="height: 330px; overflow-x: hidden; overflow-y: scroll;"> 
     Static Content 
    </div> 
    </div> 
</div> 

Answer 1

Penso che jQuery sia la soluzione migliore per raggiungere questo obiettivo. Guarda il mio violino:

http://jsfiddle.net/PHjtJ/

$(document).ready(function() { 

    var dynamic = $('.dynamic'); 
    var static = $('.static'); 

    static.height(dynamic.height()); 

}); 

Answer 2

Si potrebbe fare this

<div class="wrapper"> 
    <div class="dynamic"> 
     Dynamic Line <br /> 
     Dynamic Line <br />  
     Dynamic Line <br /> 
     Dynamic Line <br />  
     Dynamic Line <br /> 
     Dynamic Line <br />  
     Dynamic Line <br /> 
     Dynamic Line <br />  
    </div> 
    <div class="static"> 
     Static<br /> 
     Static<br />   
    </div> 
</div> 

CSS

.wrapper { 
    position: relative; 
    width: 400px; 
    overflow: auto; 
} 

.dynamic { 
    position: relative; 
    background-color: yellow; 
    width: 200px; 
} 

.static { 
    position: absolute;  
    background-color: orange; 
    width: 200px; 
    float: left; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
    right: 0px; 
} 

Answer 3

la soluzione dipende dal comportamento che si desidera nel caso in cui la colonna static è più grande della dynamic uno. [In realtà penso che tu voglia il secondo scenario.]

Avviso: entrambi i casi sono puramente CSS e senza specificare alcuna altezza. anche, senza specificare un margine di qualsiasi tipo, in modo da poter modificare la larghezza della colonna alla vostra volontà, senza la necessità di calcolare più e più volte il margine/posizione ..

1. se si desidera che la dinamica colonna per ingrandire, e per essere come l'altezza statica: così in realtà vuoi che le colonne abbiano sempre la stessa altezza. e che può essere facilmente raggiunto con lo stile di layout della tabella CSS. in quel caso: Vedere questo Fiddle (la sceneggiatura è solo per l'aggiunta di contenuti dinamici, questo è un CSS SOLUZIONE puro)

2. se si desidera che la colonna dinamica di allungare solo alla sua altezza di contenuti, e quello statico di avere la stessa altezza + uno scroller. in quel caso: vedono questo Fiddle (ancora una volta: la sceneggiatura è solo per l'aggiunta di contenuti dinamici, questa è una soluzione CSS puro)

in entrambi i casi, la colonna statica cresce se quello dinamico si allungano.

Answer 4

utilizzare JavaScript/jQuery per trovare scatola che ha il più grande altezza. Quindi imposta la stessa altezza su tutti i div.

<script type="text/javascript"> 

jQuery(document).ready(function($) { 
var description = jQuery("div.description"); 
var big =0; 
description.each(function(index, el) { 
    if(jQuery(el).height() > big) 
    big =jQuery(el).height(); //find the largest height 
}); 
description.each(function(index, el) { 
    jQuery(el).css("min-height", big+"px"); //assign largest height to all the divs 
}); 
}); 
</script>