css之子元素获取(未定义高度)父元素的高度_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:38:35
Original
1979 Leute haben es durchsucht

你可能碰到过这样的需求,一个高度不固定的区域(内容由用户创造),当鼠标经过该区域或者其神马操作时,需要出现一个与该区域一样大的模版;

我们用一个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><span class="mask"></span></div> </div>
Nach dem Login kopieren

CSS代码:

#demo div{ position:relative;        _overflow:hidden;        width:300px; } #demo span{ position:absolute;        top:0;        left:0;       width:100%;        height:100%;        _padding-bottom:500px; }
Nach dem Login kopieren

  

 

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage