html - 使用 % 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

只需将#content的display设置为flex，然后设置#chatbox的height 到 inherit。即:

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