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

如果您不知道 videobox 的高度（因为它是可变的）并且不能在 CSS 中明确设置它，您必须使用 JavaScript 来通过获取 videobox 的高度并将 chatbox 设置为相同的高度来提供帮助。这是一个使用 jQuery:

的简单示例

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

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

否则你可以使用 flexbox 和 stretch 来帮助你。参见：

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

Answer 2

如果可以将两个元素放在同一个父元素中 div。

然后您可以设置包含 div 的高度并在两个元素上使用 height:100%。

如果不能将它们放在同一个 div 中，则必须使用 javascript 或将两个元素的高度设置为精确的像素数。

Answer 3

只需将#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;
}

使用 % height 将元素的高度设置为元素的高度

Set height of element to height of element with % height

html

css

height

css-position

flexbox