Ho due DIV: un DIV modifica dinamicamente le dimensioni in base al browser (progettazione reattiva) e voglio che l'altro DIV modifichi l'altezza in base all'altezza del primo DIV. Ho pensato che il modo più semplice per farlo sarebbe quello di utilizzare JQuery per modificare dinamicamente l'altezza.JQuery: modifica dell'altezza in base a un altro elemento
ho provato la seguente:
$('section#div2').css({height:$(this).css('height').replace($('section#div1 div.div1_container').height()+'px')});
tuttavia, che il codice non funziona. Né sono varie altre versioni di quello che funziona.
La mia domanda è: come posso sostituire una singola proprietà CSS senza modificare tutte le proprietà per un dato elemento?
EDIT: Questo è come la dinamica prima DIV è codificato ...
primo contenitore del primo DIV:
position: relative;
padding-bottom: 50%;
padding-top: 30px; height: 0; overflow: hidden;
margin:0 0.7em 0 0.7em;
Poi, l'oggetto interno all'interno di quel contenitore (potrebbe non essere rilevante):
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
Ho provato questo e ancora non ha funzionato. Ho intenzione di aggiornare la domanda con il codice dinamico per il primo div nel caso in cui abbia un impatto ... In sostanza, quando ho provato il codice che hai elencato, era lo stesso risultato, nessuna modifica all'altezza quando la pagina era caricato. – Justin
Il markup html è in realtà un po 'più importante. Ho aggiornato il jQuery con quello che penso tu stia cercando di fare, in pratica vuoi che l'altezza della sezione # div2 sia la stessa della sezione # div1 corretta? –
Sì, ma ancora non funziona. Penso che il problema potrebbe essere il modo in cui il primo DIV è codificato, poiché l'altezza è tecnicamente zero. Ma ho provato a impostarlo uguale al DIV interno (che è al 100%) e non funziona ancora ... Grazie per le idee finora! – Justin