Ist es möglich, einem Element basierend auf einem anderen Element Stil/CSS zuzuordnen?

Question

Ich habe eine 3D-Party-Bibliothek (fullcalendar), der auf einigen internen Berechnungen auf der Grundlage der Höhe der Elemente dynamisch zuweist in einem beliebigen Ansichtsfenster schön aussehen:

<div style="height: 72px;"> 

Dies gilt jedoch nicht für alle Elemente passieren, fixiert einige haben Höhe. Ich möchte den Code der 3D-Party-Bibliothek nicht ändern und dachte darüber nach, ob es irgendwie möglich ist, den Stil eines Elements mithilfe von CSS auf einen anderen zu übertragen. Etwas wie:

Vielleicht gibt es ein paar andere Möglichkeiten, das gleiche Ergebnis zu bekommen, aber ich kann mir keine vorstellen.

Answer 1

Ich weiß nicht, ob Sie nach einer Lösung suchen, um mit Javascript (ich weiß nicht, ob es möglich ist, nur mit CSS aber ich glaube nicht), aber hier ist ein Ansatz mit es:

Wenn Sie zwei divs mit zwei unterschiedlichen IDs haben:

<div id="div1" style="height: 72px;"></div> 
<div id="div2"></div> 

Dann können Sie lesen die Stil-Eigenschaft der ersten getComputedStyle() mit:

var element = document.getElementById('div1'), 
    style = window.getComputedStyle(element), 
    height1 = style.getPropertyValue('height'); 

Und um es in den zweiten Einstellung:

var div2 = document.getElementById('div2'); 
div2.style.height = height1; 

JSFiddle, um zu sehen, wie es funktioniert.

Answer 2

Durch die Verwendung von weniger seine möglichen siehe Beispiel

.rounded_corners { 
     -moz-border-radius: 8px; 
     -webkit-border-radius: 8px; 
     border-radius: 8px; 
    } 

    #header { 
     .rounded_corners; 
    } 

    #footer { 
     .rounded_corners; 
    } 

Answer 3

Wenn sie im selben Container ist, können Sie verwenden, um ein flexbox.

#container { 
 
     display: flex; 
 
     flex-direction: row; 
 
     align-items:stretch /* That line gives them the same height */ 
 
    } 
 

 
#container > * { 
 
    background:gray; 
 
    border:1px solid black; 
 
    margin-right:5px; 
 
}

<div id="container"> 
 
     <div> 
 
     Some<br>very<br>high<br>text<br>that<br>uses<br>disgusting<br>BRs 
 
     </div> 
 
     <div> 
 
     The short one 
 
     </div> 
 
    </div>