Question

有一个很好的方法吗？

到目前为止，我已经尝试过flexbox，认为设置flex给孩子并且将最后一个孩子设置为绝对定位，同时将top设置为0可能会这样做，但是没有成功。

仅限Chrome（最新版本）解决方案。

＆＃13;

z-index

＆＃13;

/*
  Height of .child-a and .child-b is dynamic,
  div with "more content" must be always under .parent,
  whether .child-a or .child-b is taller.
*/

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.parent > div {
  width: 100%;
}

.child-a {
  background: rgba(255,0,0,0.5);
  height: 50px;
  flex: 1;
}

.child-b {
  background: rgba(0,0,255,0.5);
  height: 100px;
  flex: 1;
  position: absolute;
  top: 0;
}

＆＃13;

（https://codepen.io/anon/pen/EoXRwV）

Answer 1

你知道我认为我使用css网格得到了它。不是最优雅的东西，但似乎工作。如果有人偶然发现同样的问题，请将其发布在此处。

＆＃13;

.parent {
 width: 100%;
 display: grid;
 grid-template-columns: auto;
 grid-template-rows: max-content;
}

.parent > div {
  width: 100%;
}


.child-a {
  height: 150px;
  background: rgba(255,0,0,0.5);
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}

.child-b {
  height: 100px;
  background: rgba(0,0,255,0.5);
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 1;
}

＆＃13;

<div class="parent">
  <div class="child-a">aa</div>
  <div class="child-b">bb</div>
</div>

<div>
  more content
</div>

＆＃13;

Answer 2

    .parent {
  display: block;
}

.parent > div {
  width: 100%;
}

.child-a {
  background: rgba(255,0,0,0.5);
  height: 50px;
}

.child-b {
  background: rgba(0,0,255,0.5);
  height: 100px;
  position: absolute;
  top: 0;
}

两个元素在彼此之上，其父级的高度调整为较大的一个

2 个答案: