星空网 > 软件开发 > 网页设计

css之子元素获取(未定义高度)父元素的高度

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

我们用一个span来处理这个mask。由于 .sample-1 和 .sample-2 的高度是不确定的,也就是说我们没有对它们定义 height。如果父元素没有定义高度,子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度。

除了IE6,几乎所有的主流浏览器都支持子元素获取父元素(未定义高度)的高度;

对于这个用户创造内容的区域,高度会在一个什么范围内,我想你是会有一个预期的,你可以定义一个适当的padding值,如果实在无法预期,那你不妨将这个值定义大一点;这里将padding-bottom定义为500px;用_overflow:hidden;来防止mask溢出父层;

 

html代码:

<div id="demo"> <div ><p>我的高度其实是没有定义的,内容有多少我就有多高。</p><span ></span></div><div ><p>我的高度其实是没有定义的,内容有多少我就有多高。我的高度其实是没有定义的,内容有多少我就有多高。</p><span ></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;
}

  

 




原标题:css之子元素获取(未定义高度)父元素的高度

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

「对公结汇」能力升级 | 到账再加速,最快1小时!:https://www.kjdsnews.com/a/1454286.html
立即下架!Sabaton萨巴顿乐团商标侵权案件冻结维权!速看避雷!:https://www.kjdsnews.com/a/1454287.html
百亿美元全球市场!海外本土客服外包助力升降桌企业扬帆出海:https://www.kjdsnews.com/a/1454288.html
fb欧洲海外户怎么开?:https://www.kjdsnews.com/a/1454289.html
用kompass 数据库找买家:https://www.kjdsnews.com/a/1454290.html
超170条货柜被查扣!又一批跨境卖家被踢出局:https://www.kjdsnews.com/a/1454291.html
请问西安及周边5日游怎么安排?:https://www.vstour.cn/a/364173.html
图策全国免景点门票 预订景区门票优惠:https://www.vstour.cn/a/364174.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流