Question

尝试嵌入视频+聊天室。如果我使用100％的宽度，则聊天室的显示尺寸仅为〜1/4。我想让聊天室匹配16x9播放器的确切高度。

我尝试使用matchHeight js，但即使在控制台中没有错误，也无法正常运行。

谢谢您的光临。

<body>
    <?php include_once("../../files/bootstrap-header.php"); ?>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 text-center"></div>
            <div class="col-xs-12 col-sm-9">
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe allowfullscreen class="embed-responsive-item" frameborder="0" height="100%" scrolling="no" src="http://player.twitch.tv/?channel=agentcodydanks69" width="100%"></iframe>
                </div>
            </div>
            <div class="col-sm-3 col-xs-12">
                <div class="hidden-md">
                    <iframe width="100%" height="100%" src="https://www.twitch.tv/embed/runitup/chat" frameborder="0" allowfullscreen></iframe> 
                </div>
            </div>
        </div>
    </div>

Answer 1

您是否检查了每个元素，以查看其中是否有填充？可能必须将行的高度设置为较小元素的高度。

Answer 2

最好的方法是使用css flexbox

.equal--height {
  display: flex;
}

.iframe {
  background: red;
}

<div class="equal--height">
  <div class="iframe">
    <p>We've the same height</p>
  </div>
  <div class="iframe">
    <p>We've the same height</p>
    <p>Even if i have more text</p>
  </div>
</div>

使两个柱高相等的问题

2 个答案: