Question

我想将元素聊天框的高度设置为元素视频框的高度。但我不知道该怎么做。我希望你能帮帮我 ;）。如果您在不使用JavaScript的情况下向我发送方法，我也会很高兴。

代码：

＆＃13;

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

＆＃13;

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

＆＃13;

感谢您的帮助：）

Answer 1

如果您不知道videobox的高度（因为它是变量）并且无法在CSS中明确设置它，则必须使用JavaScript来帮助获取{{1的高度将videobox设置为相同。这是一个使用jQuery的简单示例：

chatbox

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

否则，您可以window.onload = function() { var h = $('#videobox').outerHeight(); $('#chatbox').css('height', h); };使用flexbox来帮助您。参见：

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

Answer 2

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

然后你可以设置包含div的高度，并在两个元素上使用高度：100％。

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

Answer 3

只需将display的{{1}}设置为#content，然后将flex height设置为#chatbox。那就是：

inherit

因此，完整的样式规则是：

#content {
    display: flex;
    ...
}

#chatbox {
    height: inherit;
    ...
}

使用％height

3 个答案: