Проблема, делающая две колонки равной высоты - PullRequest
Новая
       0

Проблема, делающая две колонки равной высоты

0 голосов
/ 28 октября 2018

Попытка встроить видео + чат.Если я использую ширину 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>

Ответы [ 2 ]

0 голосов
/ 28 октября 2018

Лучший способ - использовать 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 голосов
/ 28 октября 2018

Осматривали ли вы каждый элемент, чтобы убедиться, что вокруг одного из них нет подкладки?Может потребоваться установить высоту строки, которая будет высотой меньшего элемента.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...