1.全屏的原理是什么? 2.C店二级页面和首页在结构上有什么区别呢?
首先看第一个问题:如何全屏? 在CSS定位中,绝对定位(absolute)能够突破父级元素溢出隐藏(overflow:hidden)的限制,脱离文档流而显示出来。所以我们经常做全屏的原理,就是使用绝对定位属性来制作,非常简单,我的课程中也讲过很多遍了。
但是,有一种情况,绝对定位是不能够突破父级元素的限制的。 也就是1.父级元素有定位 2.父级元素设置了宽度 3.父级元素设置了溢出隐藏 ,当这三个限制因素同时存在的时候,绝对定位就无能为力了。这也就是为什么页头无法突破150px高和C店二级页面不能全屏的原因。
那我们现在来看一下,C店首页和二级页面的区别。
首页
可以很明显看到,首页和二级页面都有相对定位和溢出隐藏,不同的地方是,首页的宽度是100%;而二级页面的宽度950px。
看到这里,大家应该明白C店二级页面为什么不能全屏了吧?
当然天猫店铺的首页和二级页的宽度都是100%,所以都可以全屏。
那如果需要C店二级页面全屏的话,只需要将C店二级页面的宽度改成100%就可以了。如下图