如何调整一个div相对于另一个div的高度？ [复制]答案

【问题标题】：How to adjust height of a div with respect to another div? [duplicate]如何调整一个div相对于另一个div的高度？ [复制]
【发布时间】：2021-12-24 22:56:15
【问题描述】：

我有左右两个 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;
}

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

你只需要将 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>

【讨论】：

是的，它被错误地留在了那里

【解决方案2】：

最困难的方法是使用 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”而不是宽度。

【讨论】：

【解决方案3】：

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>

【讨论】：