如何使父子div具有相同的响应高度答案

【问题标题】：How to make parent and child divs have same responsive height如何使父子div具有相同的响应高度
【发布时间】：2021-12-22 12:43:46
【问题描述】：

如何使父 div (graybox5) 和子 div (outlinebox5) 高度响应，以便灰色和轮廓框始终很好地适合文本？请参阅随附的屏幕截图以了解它现在的样子，您将在框 (div) 的下半部分看到所有额外的空间。我不想要那么多额外的空间，我希望灰色框和轮廓框能很好地环绕文本。

    #graybox5 {
      width: 100%;
      min-height: 375px;
      position: relative;
      background-color: #F6F6F6;
      margin: 20px;
    }
    #outlinebox5 {
      width: 100%;
      height: 100%;
      position: absolute;
      border: 1px solid #252527;
      top: -10px;
      left: -10px;
      z-index: 10;
    }

<body>
   <div id="graybox5">
      <div id="outlinebox5">
         <p style="text-align: left; font-weight: 800; margin:20px;">
            We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
         </p>
      </div>
   </div>
</body>

【问题讨论】：

标签： html css parent responsiveness

【解决方案1】：

像这样？

.graybox {
  background-color: #F6F6F6;
  margin: 20px;
}

.outlinebox {
  border: 1px solid #252527;
  transform: translate(-10px, -10px);
}

<body>
  <div class="graybox">
    <div class="outlinebox">
      <p style="text-align: left; font-weight: 800; margin:20px;">
        We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of
        what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
      </p>
    </div>
  </div>
</body>

【讨论】：

【解决方案2】：

根据给出的代码，它看起来好像灰色框只是为了提供灰色背景，并设置一个最小高度。它似乎没有增加含义。

因此，这个 sn-p 采用了稍微不同的方法。它不使用 HTML 中的灰色框，而是使用线性渐变背景图像将部分背景设置为 div，将文本设置为灰色，该背景图像由 CSS 计算为略小于其全宽和高度元素并适当定位。

#outlinebox5 {
  width: 100%;
  height: 100%;
  min-height: 375px;
  position: relative;
  border: 1px solid #252527;
  z-index: 10;
  background-image: linear-gradient(#f6f6f6, #F6F6F6);
  background-repeat: no-repeat;
  background-size: calc(100% - 20px) calc(100% - 20px);
  background-position: 10px 10px;
}

<div id="outlinebox5">
  <p style="text-align: left; font-weight: 800; margin:20px;">
    We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like I feel a bit lightheaded maybe you should drive. And suddenly there was a terrible roar all around us and the sky was full of
    what looked like huge bats, all swooping and screeching and diving around the car, which was going about 100 miles an hour with the top down to Las Vegas. And a voice was screaming Holy Jesus! What are these goddamn animals?
  </p>
</div>

【讨论】：

虽然这是一种巧妙的方法，但它不会产生预期的结果。
哎呀！我误解了想要的东西 - 认为它应该在盒子内看起来是对称的。感谢您指出了这一点。我仍然会删除必须有 2 个元素，因为它没有任何意义。将返工。