html - 扩展到父 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。当网站转到移动设备或 slider 大小不同时，它会破坏图像。

有没有动态的方法让子框(.hero__content-wrapper)总是延伸到父框(.hero__container)的顶部？

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

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

Answer 1

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

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

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