列内の内容にかかわらず、どのように列を同じ高さにすることができますか？ - html、css

CODEPEN

私はこれだけでもCSSを使う必要があります。この特定のレイアウトでは、次のように作成された列があります。

<div class="col-md-12 no-border no-padding">
<h2 class="heading upper align-center">Headline</h2>
<p class="subheading lower align-center">Make the first thing your buyers see amazing</p>
<div class="help-link align-center upper margin-b-5">
<p class="mini-help">Need help? Watch this&nbsp;&nbsp;
<div class="help">
<div class="hvr-grow"><i class="icon-camrecorder"></i></div>
</div>
<p class="mini-help upper align-center margin b-5">&nbsp;&nbsp;quick video.</p>
</div>
</div>

回答：

私は、あなたが .row-eq-height すべての列の高さを等しく設定するには、別の列があることを忘れてしまった .col-md-12 各列の内側では、内部のコンテンツの幅をとるので、 height:100% 代わりに親の高さを取るために！

Codepenデモ

CSSの変更：

.headlines .row-eq-height > div > .col-md-12{
height:100%;
}

すでに答えられていますが、私はまだ私の答えと一緒に行きます。

私はHTMLやあなたのCSSに触れませんでしたが、いくつかのセレクタとフレックスルールを追加して、同じ高さの行にあるすべてのボックスを作成しました。 https://codepen.io/gc-nomade/pen/wrJWMq

/ * CSS UPDATE * /

div.row,
.row > div {
display: flex;
flex-wrap: wrap;
flex: 1 0 auto;
}
.row > div {
flex-flow: column;
flex: 1 0 auto;
margin-bottom: 0;
}
.row > div > div {
flex: 1 1 50%;
}

.multi-summ.align-center.bcolor-white {
margin-bottom: 2rem;
}