AlfredMeier AlfredMeier - 1 month ago 22
CSS Question

Set height of element to height of element with % height

I want to set the height of element chatbox to the height of element videobox. But I don't know how to do that. I hope you can help me ;). I would be also nice if you send me a method without using JavaScript.

Code:



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





Thanks for your help :)

Answer

Just set the display of #content to flex and then the height of #chatbox to inherit. That is:

#content {
    display: flex;
    ...
}

#chatbox {
    height: inherit;
    ...
}