css之子元素获取(未定义高度)父元素的高度_html/css_WEB-ITnose
程序员文章站
2022-05-02 22:29:58
...
你可能碰到过这样的需求,一个高度不固定的区域(内容由用户创造),当鼠标经过该区域或者其神马操作时,需要出现一个与该区域一样大的模版;
我们用一个span来处理这个mask。由于 .sample-1 和 .sample-2 的高度是不确定的,也就是说我们没有对它们定义 height。如果父元素没有定义高度,子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度。
除了IE6,几乎所有的主流浏览器都支持子元素获取父元素(未定义高度)的高度;
对于这个用户创造内容的区域,高度会在一个什么范围内,我想你是会有一个预期的,你可以定义一个适当的padding值,如果实在无法预期,那你不妨将这个值定义大一点;这里将padding-bottom定义为500px;用_overflow:hidden;来防止mask溢出父层;
html代码:
我的高度其实是没有定义的,内容有多少我就有多高。
我的高度其实是没有定义的,内容有多少我就有多高。我的高度其实是没有定义的,内容有多少我就有多高。
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中由于DIV(块元素)浮动,导致的父元素高度塌陷问题的解决方案
-
CSS让子元素div的高度填满父容器的剩余空间的方法
-
CSS子元素跟父元素的高度一致的实现方法
-
css解决浮动导致父元素高度坍塌的几种方法
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose
-
如何让父元素自适应子元素的大小?_html/css_WEB-ITnose
-
利用getComputedStyle方法获取元素css的属性值_html/css_WEB-ITnose
-
读取页面元素的onclick属性值 禁止重定向 获取url重定向后Location头指定的重定向目标_html/css_WEB-ITnose
-
请问各元素根据各自高度混排怎样做呢?_html/css_WEB-ITnose
-
高度为0的块级元素的下外边距为什么没有效果?_html/css_WEB-ITnose