別の要素に基づいて1つの要素にstyle/cssを割り当てることはできますか？

Question

私は動的に任意のビューポートで見栄えするためにいくつかの内部計算に基づいた要素の高さを割り当て3Dパーティのライブラリ（fullcalendar）を持っている：

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

ただし、これは一部が固定している、すべての要素のために発生しません。高さ。私は3Dパーティーライブラリのコードを変更したくないし、cssを使ってある要素のスタイルを別の要素のスタイルに何らかの形で適用することが可能であれば考えていた。何かのように：

.myDiv { 
    height: anotherDiv.height 
} 

多分同じ結果を得るためのいくつかの方法がありますが、私は考えることができません。あまりその可能性を使用して

Answer 1

私はあなたがJavascriptと解決策を探している場合（それが唯一のCSSで可能であるならば、私は知らないが、私はそうは思わない）知りませんが、ここでのアプローチですそれを使用して：あなたは、2つの異なるIDを持つ2つのdiv要素がある場合

：

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

を次にあなたが読むことができますそれがどのように動作するかを確認する

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

JSFiddle：

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

2つ目に設定する：getComputedStyle()を使用して最初の1のスタイルプロパティ。

Answer 2

は、彼らが同じコンテナ内にある場合、あなたはflexboxを使用することができます例

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

    #header { 
     .rounded_corners; 
    } 

    #footer { 
     .rounded_corners; 
    } 

Answer 3

を参照してください。

#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>