问题

当制作卡片时，想要实现上面是图片或色块，下面是文字的布局，
例如：

在本例中我没有使用图片，仅仅使用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>

效果如图：

总结

撑起元素必须知道父元素的尺寸，光设置百分比是不能够起作用，会一层层找到父容器，如果最终找不到父容器的高度值，也就无法让元素撑满容器了。

CSS中如何撑起内容为空的div相关推荐

css中position:fixed为啥下面还要设置一个div的height
css中position:fixed会造成"高度塌陷". 高度塌陷: 父元素包含子元素,子元素设置为浮动且父元素的height为auto或者不设置height,子元素就会脱离文档流 ...
html 伪元素放入标签,CSS中的before和:after伪元素使用详解
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注.特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元 ...
android的文本框内容居中显示图片,DIV+CSS中让布局居中_背景图片居中_文字内容居中...
在DIV CSS布局的页面里,从布局内容到页面里文章文字居中都是非常重要的,而 1.首先介绍使用css属性让整体布局的居中: 设置对象的父级内容居中,这里一个页面的为父级是什么呢?我们可以想象整个页面 ...
CSS中隐藏内容的3种方法及属性值
在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等等. 使用CSS即可使以上提到的内容隐藏起来,几种隐 ...
php修改数据库字段为空,为何修改信息后数据库表中内容为空
为什么修改信息后数据库表中内容为空套用上一套修改课题的代码写了一个修改信息的代码,但是将内容修改提交后,再查询表中内容发现除了xuehao其他内容为空? //#################### ...
css阻止换行_CSS中，如何处理短内容和长内容？
本文已经过原作者 shadeed 授权翻译. 当我们使用 CSS 构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题. 在许多情况下,添加或删除 ...
ionic android绝对定位,Safari中的CSS故障与Ionicons作为背景内容和绝对定位
我创建了我的第一个使用SASS(Compass)的网站,我非常喜欢它,它是一个非常方便的工具.我还添加了Font Awesome,并经常使用它,因为我想优化Retina desiplays,因此使用更 ...
CSS中内容的剪切属性clip
1. 在CSS中,可以使用剪切属性对元素内容的可视化区域进行控制,剪切区域所使用的属性时clip属性, 用来裁剪元素的可视化区域,内容的剪切属性可以使用2种属性值,一种为auto值,另一种为区域值,语 ...
CSS中如何制作背景图片半透明但内容不透明的效果
CSS中如何制作背景半透明但内容不透明的效果一.利用伪元素:before添加一个半透明的背景,并利用position定位属性,设置z-index值为-1,显示在下层. css: <style& ...
纯css实现中、英文菜单栏内容变换
纯css实现中.英文菜单栏内容变换 1.实现思路 ( 超级简单 ): 通过改变margin值即可 a:hover{background-color:purple;color:#FFF;margin-t ...

CSS中如何撑起内容为空的div

问题

解决方案

总结

CSS中如何撑起内容为空的div相关推荐

最新文章

热门文章