一般來(lái)說(shuō)，頁(yè)面中的body是由頁(yè)面內(nèi)容撐開(kāi)的。但有時(shí)候我們會(huì)有這樣奇怪的需求，當(dāng)頁(yè)面內(nèi)容不滿一屏?xí)r，卻要求有一個(gè)撐滿一屏的背景色。
通常的解決方案是用最小高度解決，然而如果直接子元素有下margin，就會(huì)在部分手機(jī)上觸發(fā)BFC，解決這類問(wèn)題我一般會(huì)在他的父元素上直接overflow:hidden，但是此時(shí)此刻，這種方法行不通，除非你能確定你的頁(yè)面永遠(yuǎn)不會(huì)超出一屏。
其實(shí)魚與熊掌是可以兼得的，換一種思路，我們偉大的偽元素登場(chǎng)啦。還記得那一天，我問(wèn)我們老大，你寫代碼的時(shí)候?yàn)槭裁蠢舷矚g用偽元素，只見(jiàn)他無(wú)奈的瞥了我一眼，偽元素可以在不改變HTML結(jié)構(gòu)的情況下實(shí)現(xiàn)某些css效果，這對(duì)項(xiàng)目后期維護(hù)還是很有幫助滴。
好吧，不說(shuō)廢話啦。
通常我們寫代碼是這樣的
<html>
<head></head>
<body>
我是內(nèi)容
</body>
</html>
只需改成這樣
<html>
<head></head>
<body>
<div class="page-container">
我是內(nèi)容
</div>
</body>
</html>
.page-container::beforer{
content:" ";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background-color:#ccc;/* 顏色自定義 */
z-index:-100;/* 突然想到個(gè)游戲，是男人就下100層。。。 */
}
