你可能碰到过这样的需求，一个高度不固定的区域（内容由用户创造），当鼠标经过该区域或者其神马操作时，需要出现一个与该区域一样大的模版；
我们用一个span来处理这个mask。由于 .sample-1 和 .sample-2 的高度是不确定的，也就是说我们没有对它们定义 height。如果父元素没有定义高度，子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度。
除了IE6，几乎所有的主流浏览器都支持子元素获取父元素（未定义高度）的高度；
对于这个用户创造内容的区域，高度会在一个什么范围内，我想你是会有一个预期的，你可以定义一个适当的padding值，如果实在无法预期，那你不妨将这个值定义大一点；这里将padding-bottom定义为500px；用_overflow:hidden;来防止mask溢出父层；
立即学习“前端免费学习笔记（深入）”；
html代码：
<div id="demo"> <div class="sample-1"><p>我的高度其实是没有定义的，内容有多少我就有多高。</p><span class="mask"></span></div><div class="sample-2"><p>我的高度其实是没有定义的，内容有多少我就有多高。我的高度其实是没有定义的，内容有多少我就有多高。</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/854">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175679978251103.png" alt="腾讯元宝">
</a>
<div class="aritcle_card_info">
<a href="/ai/854">腾讯元宝</a>
<p>腾讯混元平台推出的AI助手</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="腾讯元宝">
<span>223</span>
</div>
</div>
<a href="/ai/854" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="腾讯元宝">
</a>
</div>
<span class="mask"></span></div> </div>
立即学习“前端免费学习笔记（深入）”；
CSS代码：
#demo div{ position:relative; _overflow:hidden; width:300px; } #demo span{ position:absolute; top:0; left:0; width:100%; height:100%; _padding-bottom:500px; }
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
940
收藏
