The child element of css gets the height of the parent element (undefined height)_html/css_WEB-ITnose

You may have encountered such a requirement. An area with a non-fixed height (the content is created by the user). When the mouse passes over the area or performs other operations, an area similar to the area needs to appear. Large template;

We use a span to process this mask. Since the height of .sample-1 and .sample-2 is undefined, that is to say, we do not define height for them. If the parent element does not define a height, the child element can still get the actual height of the parent element through height:100%.

Except IE6, almost all mainstream browsers support child elements to obtain the height of the parent element (undefined height);

For this user-created content area, what range will the height be in? Within, I think you will have an expectation. You can define an appropriate padding value. If it is really unpredictable, you might as well define the value a bit larger; here define padding-bottom as 500px; use _overflow:hidden ; to prevent the mask from overflowing the parent layer;

html code:

<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>

CSS code:

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