1. 程式人生 > >在一個沒有固定寬高的容器中,為什麽設置position:absolute後就可以全屏顯示了?

在一個沒有固定寬高的容器中,為什麽設置position:absolute後就可以全屏顯示了?

RM pan absolute 瀏覽器 容器 window posit 繼承 nbsp

此場景適用於移動端百分比布局,背景全屏顯示。

在一個沒有固定寬高的容器中設置背景,想要背景全屏顯示,設置寬高100%後還需設置position:absolut;

原因:

absolute會脫離normal float, 即該元素會直接以root標簽(類似window但不是<html>標簽)進行參照,而root標簽的高度存在具體數值, 即瀏覽器視窗高度, 有明確px值.

而relative不會脫離normal float, 他的height會直接依賴直接父元素(em單位也是), 所以百分比計算出來的高度是依照父元素繼承的.

在一個沒有固定寬高的容器中,為什麽設置position:absolute後就可以全屏顯示了?