用CSS flexbox填充剩余高度

Question

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

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

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

柱塞： 单击此处

<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;设置height: 100vh; 在<ion-content> 。

或者，如果您无法将其删除，则直接将其设置为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>