在一个没有固定宽高的容器中,为什么设置position:absolute后就可以全屏显示了?

Posted crf-Aaron

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在一个没有固定宽高的容器中,为什么设置position:absolute后就可以全屏显示了?相关的知识,希望对你有一定的参考价值。

此场景适用于移动端百分比布局,背景全屏显示。

在一个没有固定宽高的容器中设置背景,想要背景全屏显示,设置宽高100%后还需设置position:absolut;

原因:

absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值.

而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出来的高度是依照父元素继承的.

 

以上是关于在一个没有固定宽高的容器中,为什么设置position:absolute后就可以全屏显示了?的主要内容,如果未能解决你的问题,请参考以下文章

实现没有宽高的盒子水平垂直居中

不设置宽度的盒子模型水平居中问题。

图片宽高自适应,居中裁剪不失真

vue项目中echarts自适应宽高的设置

有关盒模型中padding的使用

谈谈jQuery和js里有关位置和宽高的方法