html – 子元素父母内容的100%大小

html – 子元素父母内容的100%大小,第1张

概述是)我有的: 一个具有固定大小但动态内容大小和溢出的块元素:scroll;. 我想要的是: 内容上的透明层,因此无论父卷轴滚动多远,图层都会覆盖内容. 我尝试了什么: .layer { position: relative; width: 100%; height: 100%; bottom: 100%; z-index: 20;} 在内容之后的父母内部. 问题: 该图层正确 是)我有的:

一个具有固定大小但动态内容大小和溢出的块元素:scroll;.

我想要的是:

内容上的透明层,因此无论父卷轴滚动多远,图层都会覆盖内容.

我尝试了什么:

.layer {  position: relative;  wIDth: 100%;  height: 100%;  bottom: 100%;  z-index: 20;}

在内容之后的父母内部.

问题:

该图层正确覆盖了父级,但只要我滚动它就不会覆盖内容.

小提琴:

http://jsfiddle.net/wYgWh/2/

红色应该涵盖一切,但不能太多;

解决方法 身高:100%;给元素提供与其父元素相同的高度.
您定义的父级不如您要覆盖的内容高.

如果将“图层”放在标记中的“内容”中,则可以相对于“内容”将其绝对定位.所以现在高度:100%将与内容而不是“父”(滚动窗口)相关.

此外,当你想要定位绝对的东西时,该元素将与它最接近的非静态父元素相关.

这是fiddle.

总结

以上是内存溢出为你收集整理的html – 子元素父母内容的100%大小全部内容,希望文章能够帮你解决html – 子元素父母内容的100%大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1060444.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存