用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>