将元素的高度设置为%高度的元素高度
问题描述:
我想将元素聊天箱的高度设置为元素视频盒的高度。但我不知道该怎么做。我希望你可以帮助我 ;)。如果你没有使用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>
感谢您的帮助:)
答
刚刚成立的#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;
}
答
如果你不知道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
为您排忧解难。请参阅:
答
如果你可以把两个元素在同一个父DIV。
然后,您可以设置包含div的高度,并在两个元素上使用高度:100%。
如果不能将它们放在同一个div中,则必须使用javascript或将两个元素的高度设置为精确的像素数。