css - height 100%失效，根据内容撑开的透明层

问题描述

问 题

<style>
    .box{width: 200px;  border:1px solid #000; position:relative;background: aqua;}
    .box .opa{width: 200px; background: rgba(0,0,0,0.5); height:100%; position:absolute;}
    .box .text{width: 200px;}

    </style>

<div class="box">
        <div class="opa" id="opa"></div>
        <div class="text">杀得快发了就洒落的开发商垫付杀得快发了就洒落的开发商垫付杀得快发了就洒落的开发商垫杀得快发了就洒落的开发商垫付杀得快发了就洒落的开发商垫付杀得快发了就洒落的开发商垫付商垫付杀得快发了就洒落的开发商垫杀得快发了就洒落的开发商垫付杀得快发了就洒落的开发商垫付杀得快发了就洒落的开发商垫付</div>
    </div>![为什么给opa加position:absolute; 透明层就能显示出来，不加定位就显示不出来][1]

图片描述

解决方案

问题是opa加了position：absolute； 透明层就能显示出来，这个时候height：100%就是相对于父级box的高度，可以说是脱离文档流不受html布局限制，这个可以理解，但是不加absolute，父级box是通过子级txt的内容来占空间的，opa是不占空间，不过我检测了一次这个时候body也是有高度的，所以不能说body高度为0，因此这个解释不是很合理，我的理解是当给一个元素设置100%高度时，如果此元素的父级没有高度，且此元素没有进行绝对定位，这个时候的height：100%是失效的

这篇关于css - height 100%失效，根据内容撑开的透明层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！