如何调整 div 相对于另一个 div 的高度？

Question

我左右各有两个div。第二个 div 包含大量动态数据，因此无法固定高度。那么，如何使第一个div的高度与第二个div的高度相同？


       <div style="width: 100%;">
                <div  class="first"> 
                    Left Div 
                </div>
                <div  class="second"> 
                    <h5> hello </h5>
                    <h5> hello </h5>
                    <h5> hello </h5>
                </div>
        </div>

.first{
width: 50%;
float: left;
background: yellow;
}
.second{
margin-left: 50%;
background: grey;
}

Answer 1

CSS Flexible Box Layout

.d-flex {
  display: flex;
}
.first, .second {
  flex: 1 1 auto;
}
.first {
  background-color: yellow;
}
.second {
  background-color: grey;
}

<div class="d-flex">
  <div class="first">
    Left Div
  </div>
  <div class="second">
    <h5> hello </h5>
    <h5> hello </h5>
    <h5> hello </h5>
  </div>
</div>

Answer 2

您只需要将 flex 属性应用到您的 div

.first {
  flex: 1;
  background: yellow;
}

.second {
  flex: 1;
  background: grey;
}

<div style="width: 100%;display:flex;">
  <div class="first">Left Div </div>
  <div class="second">
    <h5> hello </h5>
    <h5> hello </h5>
    <h5> hello </h5>
  </div>
</div>

Answer 3

困难的方法是使用 JavaScript。尝试类似的东西：

document.querySelector('.first').style.height = document.querySelector('.second').clientHeight + 'px';

此代码的问题是每次调整屏幕大小时都需要应用它。

第二种解决方案是使用“flex”而不是“float”

.first {
            width: 50%;
            background: yellow;
        }

        .second {
            width: 50%;
            background: grey;
        }

        .parent {
            display: flex;
        }

<div class="parent" style="width: 100%;">
        <div class="first">
            Left Div
        </div>
        <div class="second">
            <h5> hello </h5>
            <h5> hello </h5>
            <h5> hello </h5>
        </div>
    </div>

或者使用“flex”代替宽度。

如何调整 div 相对于另一个 div 的高度？

How to adjust height of a div with respect to another div?

html

javascript

css

bootstrap-4