CSS child element gets (undefined height) the height of the parent element

You may have encountered such a requirement, a highly unstable area (content created by the user), and when the mouse passes through the area or its divine horse operation, it needs to appear a template as large as that of the area;

We use a span to handle this mask. Because the heights of. Sample-1 and. Sample-2 are indeterminate, that is, we do not define height for them. If the parent element does not have a height defined, the child element can still height:100% get the actual height of the parent element in a way.

In addition to IE6, almost all mainstream browsers support child elements to get the height of the parent element (undefined height);

For this user to create the content of the area, the height will be in a range, I think you will have an expectation, you can define an appropriate padding value, if it is not expected, then you may wish to define this value a bit larger; Here the padding-bottom is defined as 500px;_overflow:hidden;来防止mask溢出父层；

HTML code:

<div id= "Demo" > <div class= "sample-1" ><p> my height is actually undefined, how much content I have. </p><span class= "Mask" ></span></div><div class= "sample-2" ><p> my height is actually undefined, The content of how much I will be how high. My height is not defined in fact, how much content I have how high. </p><span class= "Mask" ></span></div> </div>

CSS code:

left:0;



}

　　

CSS child element gets (undefined height) the height of the parent element