文章/答案/技术大牛

发布

社区首页 >问答首页 >使两列高度相等的问题

问使两列高度相等的问题
EN

Stack Overflow用户

提问于 2018-10-28 10:57:21

回答 2查看 42关注 0票数 0

尝试嵌入视频+聊天室。如果我使用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>

css

html

bootstrap-4

回答 2

Stack Overflow用户

发布于 2018-10-28 11:05:50

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

票数 1

Stack Overflow用户

发布于 2018-10-28 14:02:00

最好的方法是使用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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/53028012

复制

相似问题

问使两列高度相等的问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使两列高度相等的问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使两列高度相等的问题
EN