Div 高度不同答案

【问题标题】：Div are not with same heightDiv 高度不同
【发布时间】：2022-07-20 21:15:11
【问题描述】：

我想让所有 div 都具有相同的高度。其实我有这个：

.box-global {
    display: inline-block;
    padding: 0;
}
@media (min-width: 640px){
    .box-global {
        width: 33%;
    }
}
@media (max-width: 640px){
    .box-global {
        width: 50%;
    }
}
.box {
    margin: 5px;
}

.text-center {
    justify-content: center;
    text-align: center;
    align-items: center;
}

.box {
    padding: 1.5rem;
    border-radius: 15px;
}

.box-p {
    padding: 2rem;
    margin: 0;
    color: white;
}

.bg-color {
    background-color: #1F2937;
}

.bg-dark {
    background-color: #151F2D;
}

h1, h2 {
    color: white;
    font-size: 2rem;
}

h4 {
    color: white;
    font-size: 1.4rem;
    margin: 0;
}

<body class="font-body bg-dark">
  <div class="text-center full-width" style="display: inline-block;justify-content: space-between;">
    <div class="box-global">
      <div class="bg-color box">
        <h4>Header 1</h4>
        <p class="text-center box-p">
          when an unknown printer took a gal
        </p>
      </div>
    </div>
    <div class="box-global">
      <div class="bg-color box">
        <h4>Header 2</h4>
        <p class="text-center box-p">
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div class="box-global">
      <div class="bg-color box">
        <h4>Header 3</h4>
        <p class="text-center box-p">
          when an unknown printer took a galley of type
        </p>
      </div>
    </div>
    <div class="box-global">
      <div class="bg-color box">
        <h4>Header 4</h4>
        <p class="text-center box-p">
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div class="box-global">
      <div class="bg-color box">
        <h4>Header 5</h4>
        <p class="text-center box-p">
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div class="box-global">
      <div class="bg-color box">
        <h4>Header 6</h4>
        <p class="text-center box-p">
          when an unknown printer took a galley of type
        </p>
      </div>
    </div>
  </div>
</body>

当使用min-height: 100%; 和/或height: 100%; 时，它不起作用（没有任何变化）

【问题讨论】：

标签： html css

【解决方案1】：

您必须确保您的父元素的高度为 100%，只有这样您才能将其他元素的高度调整到最大。此外，当您的显示设置为 inline-block 时，您不能使用 justify-content（仅适用于 display:flex）；

【讨论】：