Régler la hauteur de l'élément sur la hauteur de l'élément avec% height

Question

Je souhaite définir la hauteur de l'élément Chatbox sur la hauteur de l'élément Videobox. Mais je ne sais pas comment faire ça. J'espère que vous pouvez m'aider ;). Je serais aussi bien si vous m'envoyez une méthode sans JavaScript.

code:

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

Merci pour votre aide :)

Answer 1

Il suffit de régler la display de #content à flex puis le height de #chatbox-inherit. C'est:

#content { 
    display: flex; 
    ... 
} 

#chatbox { 
    height: inherit; 
    ... 
} 

Ainsi, les règles de style qui en résultent sont en pleine:

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

Answer 2

Si vous ne connaissez pas la hauteur du videobox (parce qu'elle est variable) et ne pouvez pas définir explicitement dans le CSS, vous devez utiliser JavaScript pour obtenir la hauteur du videobox et définir le chatbox pour être le même. Voici un exemple simple en utilisant jQuery:

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

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

Sinon, vous pouvez utiliser flexbox avec stretch pour vous aider. Voir:

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

Answer 3

Si vous pouvez mettre les deux éléments dans le même div parent.

Ensuite, vous pouvez définir la hauteur du div contenant et utiliser la hauteur: 100% sur les deux éléments.

Si vous ne pouvez pas les placer dans la même div, vous devrez utiliser javascript ou définir la hauteur des deux éléments sur un nombre exact de pixels.