％heightの要素の高さを要素の高さに設定する

Question

要素のチャットボックスの高さを要素のビデオボックスの高さに設定したい。しかし、私はそれをどうやって行うのか分かりません。あなたが私を助けてくれることを願っています;）。私はJavaScriptを使わずに私にメソッドを送ってもいいです。

コード：あなたの助けを

#content { 
 
    width: 80%; 
 
    max-width: 1300px; 
 
    min-width: 900px; 
 
    margin: 80px auto; 
 
} 
 
#stream { 
 
    position: relative; 
 
    padding-bottom: 56.25%; 
 
    height: 0; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: auto; 
 
    display: flex; 
 
} 
 
#video { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div id="content"> 
 
    <div style="width:75%;display:inline-block;vertical-align:top;" id="videobox"> 
 
    <div id="stream"> 
 
     <iframe id="video" src="http://player.twitch.tv/?channel=marmeladenoma" height="720" width="1280" frameborder="0" scrolling="no" allowfullscreen="true"> 
 
     </iframe> 
 
    </div> 
 
    </div> 
 
    <div style="width:25%;float:right;display:inline-block;background-color:rgb(3, 40, 74)" id="chatbox"> 
 
    hi 
 
    </div> 
 
</div>

感謝:)

Answer 1

ただinheritにflexに#contentのdisplayを設定し、#chatboxのheight。つまり：だから

#content { 
    display: flex; 
    ... 
} 

#chatbox { 
    height: inherit; 
    ... 
} 

、フルで生じたスタイリング・ルールは以下のとおりです。

#content { 
    display: flex; 
    width: 80%; 
    max-width: 1300px; 
    min-width: 900px; 
    margin: 80px auto; 
} 
#stream { 
    position: relative; 
    padding-bottom: 56.25%; 
    height: 0; 
    overflow: hidden; 
    width: 100%; 
    height: auto; 
    display: flex; 
} 
#video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
#chatbox { 
    height: inherit; 
} 

Answer 2

あなたは（それが変数だから）videoboxの高さを知らないと設定できない場合CSSで明示的に使用するには、JavaScriptを使用してvideoboxの高さを取得し、chatboxを同じに設定する必要があります。ここではjQueryを使った簡単な例です：

window.onload = function() { 
    var h = $('#videobox').outerHeight(); 
    $('#chatbox').css('height', h); 
}; 

http://codepen.io/paulcredmond/pen/WoQdPz

そうでない場合は、あなたがあなたを助けるためにstretchでflexboxを使用することができます。参照：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

あなたが同じ親のdivの両方の要素を入れることができます。

次に、含まれているdivの高さを設定し、両方の要素でheight：100％を使用できます。

同じdivに配置できない場合は、javascriptを使用するか、両方の要素の高さを正確なピクセル数に設定する必要があります。