CODEWITHSUNDEEP
csshtmlbootstrap-4
Miguel Guerrero
Miguel Guerrero

Reputation: 51

Issue Making Two Colums Equal Height

Trying to embed video + chatroom. If I use 100% width, the chatroom displays at only ~1/4 size. I want chatroom to match exact height of the 16x9 player.

I tried to use matchHeight js but was unable to get that to work, even with no errors in console.

Thank you for looking.

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

Upvotes: 0

Views: 47

Answers (2)

Christopher Dosin
Christopher Dosin

Reputation: 1361

The best way would be to use 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>

Upvotes: 0

MPortman
MPortman

Reputation: 181

Have you inspected each element to see if there's padding around one of them? May have to set the height for the row to be the height of the smaller element.

Upvotes: 1

Related Questions