问题
当制作卡片时,想要实现上面是图片或色块,下面是文字的布局,
例如:
在本例中我没有使用图片,仅仅使用div的背景颜色,由于没有图片或元素填充,很容易导致色块的高度为0,因而不显示。
解决方案
想要让元素撑起父容器,那么父容器的高度 宽度等就得是已知的值,不能是100%这类
下面贴上我的解决方案链接:https://codesandbox.io/s/purple-night-lu8wn?file=/src/components/HelloWorld.vue
<template>
<div class="wrapper">
<div class="card">
<div class="card-inner"></div>
<div class="content">i am content</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper {
height: calc(100vh - 400px);
border: 1px red solid;
}
.card {
height: 100%;
background-color: green;
display: flex;
flex-flow: column;
border: 1px red solid;
}
.card-inner {
flex: 1;
height: 67%;
background-color: rgb(32, 160, 255);
border: 1px red solid;
}
.content {
text-align:center;
}
</style>
效果如图:
总结
撑起元素 必须知道父元素的尺寸,光设置百分比是不能够起作用,会一层层找到父容器,如果最终找不到父容器的高度值,也就无法让元素撑满容器了。