使用CSS flexbox填充剩余高度

Question

我有一个场景如下，其中我有内容为1的div，内容为2的div，以及宽度为100％（高度不同）的图像。我想要实现的是将div 1放在顶部，将图像放在底部，并保留内容2.请注意，所有3应完全适合设备视图。

我知道使用flexbox可以帮助我实现上述目标，但我不确定如何实现它。

请注意，我期待一个纯粹的CSS解决方案。

Plunker：Click here

<ion-view title="Welcome">
  <ion-content has-header="true" style="display: flex; flex-flow: column;">
    <div style="height: 100%">
      <div style="background-color: red;">
        Content 1 (height based on content)
      </div>
      <div style="background-color: blue; flex: 2;">
        Content 2 (remaining height)
      </div>
      <div>
        <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
      </div>
    </div>
  </ion-content>
</ion-view>

Answer 1

您应该删除<div style="height: 100%">以使Flexbox布局正常工作，否则div将是唯一的Flex项目，然后在height: 100vh;上设置<ion-content>。

或者，如果您不能将div设置为Flex容器，则再次需要定义height。另一个选择是嵌套的flexbox布局，但似乎没有必要。

<强> jsFiddle

<ion-view title="Welcome">
  <ion-content has-header="true" style="display: flex; flex-flow: column; height: 100vh;">
    <div style="background-color: red;">
      Content 1 (height based on content)
    </div>
    <div style="background-color: blue; flex: 1;">
      Content 2 (remaining height)
    </div>
    <div>
      <img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
    </div>
  </ion-content>
</ion-view>