固定定位的页脚，但也是 Flexbox 元素流的一部分

Question

我正在使用 Flexbox，但是运行遇到以下文档结构的问题

<div class="parent">
  <div class="child A">
    <div class="top-section"></div>
    <ul class="main-section">
      <li></li>
      ...
    </ul>
  </div>
  <div class="child B">

  </div>
</div>

我希望 child B 始终固定在屏幕底部，并让 child A 填充 child B 上方剩余的 space。

在 child A 内，top-section 应该始终在顶部，并具有固定的高度，main-section 应该填充 child A 中剩余的 space，并可在 y 轴上滚动。

我试过

.parent {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-height: 100%;
}

.childA {
  flex: 4;
  width: 100%;
}

.childB {
  position   : absolute;
  bottom     : 0;
  min-height : 250px;
  max-height : 20%;
  width      : 100%;
}

.main-section {
  overflow-y : scroll;
}

虽然它正确地将 child B 固定在底部，但它不再是元素流的一部分，因此 main-section 延伸到它下面并且无法溢出。

非常感谢任何帮助

Answer 1

我做了这个 fiddle 来演示解决方案：http://jsfiddle.net/aequalsb/mL5gtsep/

它利用绝对定位来适当地设置 top 和 bottom 属性，这样容器就可以在不依赖特定宽度和高度的情况下伸展到极限。

即使 CSS 最初使用 % 设置属性，在 DOM 中，长度是由浏览器计算的，并且 javascript/jQuery 可以作为特定的 px 长度使用 -- 这然后 OP 可以使用鼠标拖动操作来调整容器的大小。

固定定位的页脚，但也是 Flexbox 元素流的一部分

Fixed positioned footer but also part of element flow with Flexbox

css

flexbox