Question

我有两个垂直堆叠的div。单击按钮时，我试图将下div延伸到上div的顶部。当底部div使用绝对定位，并根据需要更新较低div的top属性时，此方法效果很好。

当顶部div的高度可变时，就会出现问题。我希望下层div在不拉伸时位于上层div的底部。如何更新下面的代码，即使其高度发生变化，底部div也始终位于顶部div之下？

Answer 1

在这种情况下，应避免使用position: absolute，因为make元素会停止相互影响。相反，我建议您对两个元素都使用 flexbox 组合宽度min-width和max-width。如果您的组件始终具有固定高度（在您的示例中为300px），则内容可能会溢出容器。我对设计上下文的了解会有所帮助，因此希望该解决方案对您有用。

document.querySelector('.toggle').addEventListener('click', function() {
  document.querySelector('.wrapper').classList.toggle('expanded');
});

body {
  margin: 10rem;
}

div {
  width: 12rem;
}

.wrapper {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  height: 300px;
  position: relative;
}

.stationary {
  min-height: 50%;
  max-height: 100%;
  transition: min-height 1s, max-height 1s;
  background: red;
  overflow: auto;
}
.expanded .stationary {
  max-height: 0;
  min-height: 0%;
}

.expanding {
  flex: auto;
  bottom: 0;
  height: 100%;
  max-height: auto;
  background: blue;
  transition: max-height 1s;
}

.expanded .expanding {
  max-height: 100%;
  transition: max-height 1s;
}

<button class="toggle">Toggle</button>
<div class="wrapper">
  <div class="stationary">
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
  </div>
  <div class="expanding">
    Random text that makes this a variable height div....
    Random text that makes this a variable height div....
  </div>
</div>

Answer 2

也许选项之一不是展开blue div，而是折叠红色div。这是一种方法。

https://codepen.io/anon/pen/yrzBja

把戏是使包装纸的背景变蓝。

唯一的问题是max-height需要设置为任意值（在我的示例100%中），因此过渡看起来有点延迟。

希望您能从中得到一些启发，以进一步改善您的解决方案。

在不使用绝对定位的情况下将div拉伸到其他可变高度div的顶部

2 个答案: