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

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

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

也可以删除最大宽度，因为它将占用父对象的宽度。您也可以将position:relative添加到.hero__container类中。这样可以解决您的问题吗？

Answer 2

马特-

为了便于阅读，我们将该示例进行了稀释，但实际上创建了相同的东西：

<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等边界定边界的边缘-这样就给了我们一个未指定尺寸的蓝色框，并填充了其父容器。

子Div延伸到父Div的全高

2 个答案: