1.全屏的原理是什么? 2.C店二級頁面和首頁在結(jié)構(gòu)上有什么區(qū)別呢?
首先看第一個(gè)問題:如何全屏? 在CSS定位中,絕對定位(absolute)能夠突破父級元素溢出隱藏(overflow:hidden)的限制,脫離文檔流而顯示出來。所以我們經(jīng)常做全屏的原理,就是使用絕對定位屬性來制作,非常簡單,我的課程中也講過很多遍了。
但是,有一種情況,絕對定位是不能夠突破父級元素的限制的。 也就是1.父級元素有定位 2.父級元素設(shè)置了寬度 3.父級元素設(shè)置了溢出隱藏 ,當(dāng)這三個(gè)限制因素同時(shí)存在的時(shí)候,絕對定位就無能為力了。這也就是為什么頁頭無法突破150px高和C店二級頁面不能全屏的原因。
那我們現(xiàn)在來看一下,C店首頁和二級頁面的區(qū)別。
首頁
可以很明顯看到,首頁和二級頁面都有相對定位和溢出隱藏,不同的地方是,首頁的寬度是100%;而二級頁面的寬度950px。
看到這里,大家應(yīng)該明白C店二級頁面為什么不能全屏了吧?
當(dāng)然天貓店鋪的首頁和二級頁的寬度都是100%,所以都可以全屏。
那如果需要C店二級頁面全屏的話,只需要將C店二級頁面的寬度改成100%就可以了。如下圖