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

Question

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

    #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>

Answer 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>

Answer 2

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

因此，此代码段采用了稍微不同的方法。它不在 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>

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

How to make parent and child divs have same responsive height

html

css

parent

responsiveness