如何根据孩子的绝对身高增加父母身高div

Question

我正在尝试在Gatbsy（React）应用程序中实现以下布局。我看起来像那样。问题在于，白色方块取决于高度将改变的内容。如果此高度改变，则蓝色的高度也需要改变。该页面必须始终看起来基本上像图片附件，这意味着无论白色正方形的高度如何，它都必须始终在蓝色正方形的上方。

我正在使用Sass（SCSS）。

代码笔： https://codepen.io/devpato/pen/ZEYwexw

CSS

 .header, .footer {
      width: 100%;
      height: 200px;
      background-color: green;
    }

    .blue {
      position: relative;
      /* Height can't have a set value */
      height: 400px;
      background-color: blue;
      width: 100%;

      .white {
      height: 400px;
      position: absolute;
      background-color: white;
      left: 0;
      right: 0;
      margin: 0 auto;
      top: -24px;
      width:  80%;
     }
    }

HTML

<div class="container">
  <div class="header"></div>
  <div class="blue">
       <div class="white"></div>
  </div>
  <div class="footer"></div>
</div>

Answer 1

从父级移除高度，并在子级中添加相对位置，而不是绝对位置

.blue {
  position: relative;
  background-color: blue;
  width: 100%;
  .white {
  height: 400px;
  position: relative;
  background-color: white;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -24px;
  width:  80%;
 }
}

Answer 2

然后只删除父级的身高，并保持子级的身高，并将子级设置为相对值，如下所示：

.blue {
  position: relative;
  /* Hight can't have a set value */
  /*height: 400px;*/
  background-color: blue;
  width: 100%;
  .white {
    height: 400px;
    position: relative;
    background-color: white;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -24px;
    width:  80%;
 }
}

也请参见此处：codepenexample