我正在尝试将内容2拆分为2个相等宽度的div,以填充整个内容2的高度,但未能这样做。怎么会有效?
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;">
<div style="display: inline-block;">
<div style="width: 50%; height: 100%; background: gray;">
Content 2(part 1)
</div>
<div style="width: 50%; height: 100%; background: tomato;">
Content 2(part 2)
</div>
</div>
</div>
<div>
<img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
</div>
</div>
</ion-content>
</ion-view>
答案 0 :(得分:2)
<ion-content scroll="false" 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; display:flex;flex-direction:row;height:100vh;">
<div style="flex:1;hight:100vh;">
content 2 part 1
</div>
<div style="flex:1;">
Content 2 part 2
</div>
</div>
<div>
<img style="width: 100%;" src="http://dummyimage.com/600x400/000/fff" />
</div>
</ion-content>