将元素的高度设置为％高度的元素高度

我想将元素聊天箱的高度设置为元素视频盒的高度。但我不知道该怎么做。我希望你可以帮助我 ;）。如果你没有使用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>

感谢您的帮助:)

来源

2016-11-09 AlfredMeier

刚刚成立的#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; 
}

来源

2016-11-09 16:47:59 Maviza101

如果你不知道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/

来源

2016-11-09 16:37:42

如果你可以把两个元素在同一个父DIV。

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

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

来源

2016-11-09 16:41:53 RobPethi

将元素的高度设置为％高度的元素高度

回答

相关问题