HTML與BODY的表現

最近糾結於一個body滿鋪的問題，具體狀況是：

body背景圖高度固定在2000px左右；
body內內容高度不固定（可能會小於瀏覽器可視窗口高度，也可能會高於背景圖高度即高於2000px）；

稍早前的實現方案是作一塊背景div，用js監控滑動位置，再對其進行fixed定位或者absolute定位操做。
具體以下：

body>.fixed-bg-pic {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    background: url(bg.jpg) center 0px no-repeat;
    z-index: -1;
}
body>.fixed-bg-pic.scroll {
    position: fixed;
    top: auto;
    height: 1752px;
    bottom: 0px;
    left: 0px;
}
body>.fixed-bg-pic.bottom {
    bottom: 210px;
    height: 1752px;
    top: auto;
}

高度控制

_p.bgPicResize = function(){
            var scrollH = $(window).scrollTop(),
                docHeight = $(document).height();
            //內容小於背景圖
            if(docHeight < 1752){
                _p._$backPic.removeClass('bottom');
                _p._$backPic.removeClass('scroll');
            }
            //從上往下滑動到背景圖底部
            else if(!_p._$backPic.hasClass('scroll')&&!_p._$backPic.hasClass('bottom')&&scrollH+_p._winHeight>1752)
                _p._$backPic.addClass('scroll');
            //從下往上滑動，背景圖觸頂時
            else if(_p._$backPic.hasClass('scroll')&&scrollH+_p._winHeight<1752){
                _p._$backPic.removeClass('scroll');
            //從上往下活動，背景圖觸底時
            }else if(!_p._$backPic.hasClass('bottom')&&scrollH>docHeight-242-_p._winHeight){
                _p._$backPic.removeClass('scroll');
                _p._$backPic.addClass('bottom');
            //從下往上滑動，背景圖離底時
            }else if(_p._$backPic.hasClass('bottom')&&scrollH<docHeight-242-_p._winHeight){
                _p._$backPic.addClass('scroll');
                _p._$backPic.removeClass('bottom');
            }
        };

後來遇到一個問題：
當body內內容小於瀏覽器可視窗口高度時，會致使背景div沒法滿鋪整個窗口。
若是給body和html都設置高度100%，這樣又會致使背景div沒法徹底展開（只能有可視窗口高度）。
最後的解決辦法是以下：

html{
    height: 100%;
}
body{
    background: #000;
    position: relative;
    min-height: 100%;
    height: auto;
}

後來查閱了一些資料，發現這個問題可以經過background:fixed;來解決。。。（學藝不精，無話可說）
以前的思路還能沿用，不須要單獨的背景div，直接將背景放在body上，控制背景的位置就能夠了：

html{
    height: 100%;
}
body{
    position: relative;
    min-height: 100%;
    height: auto;
    background: url(bg.jpg) center 0px fixed no-repeat;
    background-color: #000;
}
body.scroll {
    background-attachment:fixed;
    background-position:left bottom;
}
body.bottom {
    background-attachment: scroll;
    background-position: center 1542px;
}

關於html與body的一些表現

背景色

通常控制背景色body{color:#000}; 瀏覽器界面都滿鋪黑色，看似是body標籤下背景色起做用了，可是若是body內容不足以撐滿瀏覽器界面時，body高度是沒有充滿瀏覽器的，而背景色卻可以滿鋪。

body{
    background: #fec;
    padding: 100px;
    margin: 100px;
    border: 10px solid #000;
}

若是是在html設置背景色，body背景色會被取代，由html背景色填充整個瀏覽器窗口。

html{
    background: #cdf;
}
body{
    background: #fec;
    padding: 100px;
    margin: 100px;
    border: 10px solid #000;
}

background的fixed固定定位

通常狀況下大部分瀏覽器是支持的，當html標籤帶着background屬性時，如：

html{
    background:#000;
}
body{
    background: url(bg.jpg) center 0px fixed no-repeat;
}

這時候，背景圖片不能固定，推測緣由應該和上面說的背景色有關係，即html設置背景色後，瀏覽器的背景色取的是html的背景色，body背景再也不做爲瀏覽器背景，而body沒有滿鋪的緣由。

height:100%

關於高度百分之百的做用，通常來講，知足兩個條件：

其一，父標籤有高度可尋，就是向上遍歷父標籤要找到一個定值高度（body，html另外討論），若是中途有個height爲auto或是沒有設置height屬性，則高度百分比不起做用；
其二，標籤自己的屬性，若是inline屬性的標籤，若是沒有浮動，zoom，或是絕對定位之類屬性是不支持百分比高度的，block或inline-block屬性能夠說是高度百分比起做用的前提條件之一吧。

默認狀況下，body不是高度100%顯示的，想讓body支持height100%，須要在html上添加height：100%。