[英]Filling up remaining height with CSS flexbox
I have a scenario as follow, where i have div with content 1, div with content 2, and a image that takes 100% width (height varies). 我有以下情况,其中我的div的内容为1,div的内容为2,并且图像的宽度为100%(高度不同)。 What i want to achieve is to fit div 1 on top, the image on bottom and remaining with content 2. Do note that all 3 should be fit perfectly into the device view.
我要实现的是将div 1放在顶部,图像放在底部,并保留内容2。请注意,所有3都应完全适合设备视图。
I know that using flexbox could help me acheiving above, but i am not sure how to implement it. 我知道使用flexbox可以帮助我实现上述目标,但是我不确定如何实现它。
Note that i am expecting a pure css solution. 请注意,我期待一个纯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>
You should remove <div style="height: 100%">
to make the flexbox layout to work, otherwise that div would be the only flex item, then set height: 100vh;
您应该删除
<div style="height: 100%">
以使flexbox布局正常工作,否则div将是唯一的flex项目,然后将height: 100vh;
设置height: 100vh;
on <ion-content>
. 在
<ion-content>
。
Or, set that div as the flex container directly if you can't remove it, again need to define the height
too. 或者,如果您无法将其删除,则直接将其设置为flex容器,同样需要定义
height
。 Another option would be nested flexbox layout but seems it won't be necessary. 另一个选项是嵌套的flexbox布局,但似乎没有必要。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.