延伸到父 Div 的全高的子 Div

Question

我试图让我的子 div 部分一直到父 div 部分的顶部和底部。转到此示例 URL 的底部（加拿大国旗站立桨板运动员所在的位置）：https://www.lakeshoresup.com/product/pathfinder/ 基本上，如果我将宽度设置为大于 41%，我会得到一个不会到达该部分顶部和底部的小区域。

代码：

    <div class="hero__container container">
       <div class="hero__content-wrapper" style="background-color: rgba(0,0,0,0.2); flex: 60% ; max-width: 60%;">
            <h1 class="hero__title hero__title--big">
  Adrift in the Canadian Rockies</h1>
  <p class="hero__content hero__content--medium">
    Jake and Lyndsay embark on a Lakeshore adventure with their inflatable paddleboards.  </p>
          <div class="primary-link">
            <a href="https://www.lakeshoresup.com/2015/07/28/adrift-in-the-canadian-rockies-with-jake-lyndsay-part-1/" class="hero__primary-link btn" target="_blank">
              Read Their Story    </a>
          </div>
        </div>
     </div> 

CSS

.hero--right .container {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.hero__content-wrapper {
    padding-left: 20px;
    padding-right: 20px;
    display: table-cell;
    vertical-align: top;
}

我尝试将min-height:760px 添加到有效但不是动态的css 中。当网站转到移动设备或滑块大小不同时，它会破坏图像。

有没有一种动态的方式让子盒子（.hero__content-wrapper）总是延伸到父盒子（.hero__container）的顶部？

这是我可以使用下面的 CSS 并让它在所有浏览器中运行的东西，还是有更好的方法来做到这一点？

height: -moz-available;          
height: -webkit-fill-available;
height: fill-available;

Answer 1

马特-

为了便于阅读，让我们简化示例，但本质上创建相同的东西：

<div class="container"> 
  <div class="box"></div>
</div>

CSS：

.container {
  position: relative;
  height: 100px;
  width: 100px;
  border: 1px solid red;
}
.box {
  background: blue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

这里，我们只是使用 CSS Position 来设置元素对容器尺寸的引用。然后我们以 top:0 等为目标边界的边缘 - 这给了我们一个未指定尺寸的蓝色框，填充其父容器。

Answer 2

我认为找到了解决您问题的方法。

.hero__content-wrapper {
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     width: 100%;
}

还要删除最大宽度，因为它将占用父级的宽度。您还可以将 position:relative 添加到 .hero__container 类。这能解决你的问题吗？