成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

HTML與BODY的表現(xiàn)

dingda / 1526人閱讀

摘要：最后的解決辦法是如下后來查閱了一些資料，發(fā)現(xiàn)這個(gè)問題能夠通過來解決。。。默認(rèn)情況下，不是高度顯示的，想讓支持，需要在上添加。

最近糾結(jié)于一個(gè)body滿鋪的問題，具體情況是：

body背景圖高度固定在2000px左右；
body內(nèi)內(nèi)容高度不固定（可能會(huì)小于瀏覽器可視窗口高度，也可能會(huì)高于背景圖高度即高于2000px）；

稍早前的實(shí)現(xiàn)方案是做一塊背景div，用js監(jiān)控滑動(dòng)位置，再對其進(jìn)行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();
            //內(nèi)容小于背景圖
            if(docHeight < 1752){
                _p._$backPic.removeClass("bottom");
                _p._$backPic.removeClass("scroll");
            }
            //從上往下滑動(dòng)到背景圖底部
            else if(!_p._$backPic.hasClass("scroll")&&!_p._$backPic.hasClass("bottom")&&scrollH+_p._winHeight>1752)
                _p._$backPic.addClass("scroll");
            //從下往上滑動(dòng)，背景圖觸頂時(shí)
            else if(_p._$backPic.hasClass("scroll")&&scrollH+_p._winHeight<1752){
                _p._$backPic.removeClass("scroll");
            //從上往下活動(dòng)，背景圖觸底時(shí)
            }else if(!_p._$backPic.hasClass("bottom")&&scrollH>docHeight-242-_p._winHeight){
                _p._$backPic.removeClass("scroll");
                _p._$backPic.addClass("bottom");
            //從下往上滑動(dòng)，背景圖離底時(shí)
            }else if(_p._$backPic.hasClass("bottom")&&scrollH

后來遇到一個(gè)問題：
當(dāng)body內(nèi)內(nèi)容小于瀏覽器可視窗口高度時(shí)，會(huì)導(dǎo)致背景div無法滿鋪整個(gè)窗口。
如果給body和html都設(shè)置高度100%，這樣又會(huì)導(dǎo)致背景div無法完全展開（只能有可視窗口高度）。
最后的解決辦法是如下：


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


后來查閱了一些資料，發(fā)現(xiàn)這個(gè)問題能夠通過background:fixed;來解決。。。（學(xué)藝不精，無話可說）
之前的思路還能沿用，不需要多帶帶的背景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;
}

關(guān)于html與body的一些表現(xiàn)
背景色

一般控制背景色body{color:#000}; 瀏覽器界面都滿鋪黑色，看似是body標(biāo)簽下背景色起作用了，但是如果body內(nèi)容不足以撐滿瀏覽器界面時(shí)，body高度是沒有充滿瀏覽器的，而背景色卻能夠滿鋪。


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



如果是在html設(shè)置背景色，body背景色會(huì)被取代，由html背景色填充整個(gè)瀏覽器窗口。


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



background的fixed固定定位

一般情況下大部分瀏覽器是支持的，當(dāng)html標(biāo)簽帶著background屬性時(shí)，如：


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


這時(shí)候，背景圖片不能固定，推測原因應(yīng)該和上面說的背景色有關(guān)系，即html設(shè)置背景色后，瀏覽器的背景色取的是html的背景色，body背景不再作為瀏覽器背景，而body沒有滿鋪的原因。

height:100%

關(guān)于高度百分之百的作用，一般來說，滿足兩個(gè)條件：


其一，父標(biāo)簽有高度可尋，就是向上遍歷父標(biāo)簽要找到一個(gè)定值高度（body，html另外討論），如果中途有個(gè)height為auto或是沒有設(shè)置height屬性，則高度百分比不起作用；
其二，標(biāo)簽本身的屬性，如果inline屬性的標(biāo)簽，如果沒有浮動(dòng)，zoom，或是絕對定位之類屬性是不支持百分比高度的，block或inline-block屬性可以說是高度百分比起作用的前提條件之一吧。


默認(rèn)情況下，body不是高度100%顯示的，想讓body支持height100%，需要在html上添加height：100%。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49734.html

相關(guān)文章

  • JavaScript中DOM的層次節(jié)點(diǎn)（一）

    摘要：是針對和文檔的一個(gè)，描繪了一個(gè)層次化的節(jié)點(diǎn)樹，允許開發(fā)人員添加修改刪除節(jié)點(diǎn)的一部分。類型級(jí)定義了接口，該接口由中的所有節(jié)點(diǎn)類型實(shí)現(xiàn)。添加的這些屬性分別對應(yīng)于每個(gè)元素中都存在的下列標(biāo)準(zhǔn)特性。 DOM是針對HTML和XML文檔的一個(gè)API，描繪了一個(gè)層次化的節(jié)點(diǎn)樹，允許開發(fā)人員添加、修改、刪除節(jié)點(diǎn)的一部分。 DOM將HTML和XML文檔描繪成一個(gè)有多個(gè)節(jié)點(diǎn)構(gòu)成的結(jié)構(gòu)，節(jié)點(diǎn)分為12種不同的...

    leap_frog 評(píng)論0 收藏0

  • CSS權(quán)威指南學(xué)習(xí)筆記系列(1)CSS和文檔

    摘要：行內(nèi)元素不會(huì)在它本身之前或之后生成分隔符，所以可以出現(xiàn)在另一個(gè)元素的內(nèi)容中，而不會(huì)破壞其顯示。標(biāo)記標(biāo)記基本目的是允許創(chuàng)作人員將包含標(biāo)記的文檔與其他文檔相關(guān)聯(lián)。更多細(xì)節(jié)請看權(quán)威指南 題外話：HTML是一種結(jié)構(gòu)化語言，而CSS是它的補(bǔ)充；這是一種樣式語言。CSS是前端三板斧之一，因此學(xué)習(xí)CSS很重要。而我還是菜鳥，所以需要加強(qiáng)學(xué)習(xí)CSS。這個(gè)是我學(xué)習(xí)CSS權(quán)威指南的筆記，如有不對，請諒解和...

    peixn 評(píng)論0 收藏0

  • 深入探究iOS下fixed定位導(dǎo)致的問題

    摘要：討論背景眾所周知，元素在下的表現(xiàn)是糟糕的，元素在滾動(dòng)頁面中使用會(huì)出現(xiàn)各種奇怪的問題，在微信瀏覽器中使用就更甚如頁面滾動(dòng)，元素與頁面相互分離頁面滾動(dòng)，元素消失等。說明原生漸變顏色終止會(huì)覆蓋微信重設(shè)顏色的機(jī)制。 討論背景 眾所周知，fixed元素在IOS下的表現(xiàn)是糟糕的，fixed元素在滾動(dòng)頁面中使用會(huì)出現(xiàn)各種奇怪的問題，在微信瀏覽器中使用就更甚（如：頁面滾動(dòng)，fixed元素與頁面相互分離...

    tulayang 評(píng)論0 收藏0

  • 深入探究iOS下fixed定位導(dǎo)致的問題

    摘要：討論背景眾所周知，元素在下的表現(xiàn)是糟糕的，元素在滾動(dòng)頁面中使用會(huì)出現(xiàn)各種奇怪的問題，在微信瀏覽器中使用就更甚如頁面滾動(dòng)，元素與頁面相互分離頁面滾動(dòng)，元素消失等。說明原生漸變顏色終止會(huì)覆蓋微信重設(shè)顏色的機(jī)制。 討論背景 眾所周知，fixed元素在IOS下的表現(xiàn)是糟糕的，fixed元素在滾動(dòng)頁面中使用會(huì)出現(xiàn)各種奇怪的問題，在微信瀏覽器中使用就更甚（如：頁面滾動(dòng)，fixed元素與頁面相互分離...

    toddmark 評(píng)論0 收藏0

  • HTML css

    摘要：是的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。本例中的樣式表把段落元素設(shè)置為內(nèi)聯(lián)元素。CSS 是 Cascading Style Sheets的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。 css 有四種引入方式 一，行內(nèi)式： hello 二, 嵌入式 嵌入式是將CSS...

    cfanr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<