Question

我使用这个系统有2个相同高度的列，但我希望孩子有高度百分比。但它没有用。

http://getbootstrap.com.vn/examples/equal-height-columns/

这是我的代码：

<div class="row" style="display: flex;">
<div class="col-lg-6" style="background-color: blue;">1<br />2<br />3<br /></div>
<div class="col-lg-6" style="background-color: purple;">
    <div style="height: 50%; background-color: yellow;">I want this as 50% of father</div>
    <div style="height: 50%; background-color: orange;">I want this as 50% of father</div>
</div>

Answer 1

我会通过获取父级的高度，将其除以2并使用javascript将子高度设置为新高度来实现：http://jsfiddle.net/1r4v8fcf/5/

function height() {
    var height = document.getElementById('fullHeight').clientHeight;
    height = height / 2;
    document.getElementById('halfHeight').style.height = height + "px";
}

您可以通过更改此img占位符的高度来测试它：

来自：<img src="http://placehold.it/100x400">

至：<img src="http://placehold.it/100x800">

具有Bootstrap的等高柱和子高度（以百分比表示）

1 个答案: