HTML與BODY的表現

dingda 發布于2019-08-01 15:03 / 1479人閱讀

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

最近糾結于一個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
后來遇到一個問題：
當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%。

云服務器 GPU云服務器 html兩個body 內存故障的表現 linux硬盤損壞的表現 cn域名在國外的表現

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49734.html

JavaScript中DOM的層次節點（一）

摘要：是針對和文檔的一個，描繪了一個層次化的節點樹，允許開發人員添加修改刪除節點的一部分。類型級定義了接口，該接口由中的所有節點類型實現。添加的這些屬性分別對應于每個元素中都存在的下列標準特性。 DOM是針對HTML和XML文檔的一個API，描繪了一個層次化的節點樹，允許開發人員添加、修改、刪除節點的一部分。 DOM將HTML和XML文檔描繪成一個有多個節點構成的結構，節點分為12種不同的...

leap_frog 2019-08-19 17:19 評論0 收藏0
CSS權威指南學習筆記系列(1)CSS和文檔

摘要：行內元素不會在它本身之前或之后生成分隔符，所以可以出現在另一個元素的內容中，而不會破壞其顯示。標記標記基本目的是允許創作人員將包含標記的文檔與其他文檔相關聯。更多細節請看權威指南題外話：HTML是一種結構化語言，而CSS是它的補充；這是一種樣式語言。CSS是前端三板斧之一，因此學習CSS很重要。而我還是菜鳥，所以需要加強學習CSS。這個是我學習CSS權威指南的筆記，如有不對，請諒解和...

peixn 2019-08-28 18:30 評論0 收藏0
深入探究iOS下fixed定位導致的問題

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

tulayang 2019-08-02 15:57 評論0 收藏0
深入探究iOS下fixed定位導致的問題

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

toddmark 2019-08-29 13:06 評論0 收藏0
HTML css

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

cfanr 2019-04-23 11:57 評論0 收藏0