專利名稱：：層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法
技術領域：
：本發(fā)明涉及一種新型的層疊樣式表的運用，尤指一種利用層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器的高度/寬度自適應方法，能夠解決用戶Web頁面中非固定區(qū)域在各個瀏覽器、各種分辨率下的高度/寬度不能自適應問題。
背景技術：
：目前現(xiàn)有的層疊樣式表(CSS，CascadingStyleSheet)實現(xiàn)非固定區(qū)域隨瀏覽器的高度/寬度自適應方法主要有通過JS(JavaScript)獲取當前窗口的高度/寬度，再減去固定區(qū)域的一個高度/寬度值，把結果值作為高度/寬度賦給非固定區(qū)域?，F(xiàn)有技術是通過如下的程序實現(xiàn)的document.getElementByld(非固定區(qū)域id)=document.body.scrollHeight-m+'px，首先需要通過JavaScript獲取當前窗口的高度/寬度值，另設固定區(qū)域的高度/寬度值，再將當前窗口的高度/寬度值減去該預設區(qū)域的高度/寬度值，將得到數(shù)值賦給非固定區(qū)域，作為非固定區(qū)域的高度/寬度。在現(xiàn)有技術中，由于部分老式瀏覽器不支持JavaScript，如ie6以下的版本ie5,ie5.5等，或者瀏覽器禁用了JavaScript，那么該方法將無法實現(xiàn)瀏覽器高度的自適應。除此之外，現(xiàn)有技術還存在以下的不足1、由于現(xiàn)有的層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器的高度/寬度自適應方法，是針對Web頁面實際的高度的數(shù)值進行操作，得到的最終結果也是非固定區(qū)域的高度的具體數(shù)值，然而，在不同顯示器、不同分辨率的情況下顯示的結果可能不同，則可能會導致頁面錯亂的問題。2、按照此種方法得到非固定區(qū)域的高度/寬度值，需要進行減法步驟獲得非固定區(qū)域的高，在Web高訪問的情況下，如上千萬次訪問具有多個固定區(qū)域，且多個固定區(qū)域分布于整個網(wǎng)站的不同頁面時，需要進行多次的減法步驟才能得到最終的非固定區(qū)域的高度/寬度，影響執(zhí)行效率。
發(fā)明內容本發(fā)明的目的在于，提供一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器的高度自適應方法，解決瀏覽器禁用JS造成頁面錯亂的問題。本發(fā)明的又一目的在于，提供一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器的高度/寬度自適應方法，使得進行Web頁面編輯的步驟更為簡單，并加快了頁面讀取加載的速度。為達到上述目的，本發(fā)明采用如下的技術手段一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，包括以下步驟步驟SlOl對可視內容區(qū)設置第一頁面區(qū)，第一頁面區(qū)距可視內容區(qū)的側邊預留一個預留區(qū)；步驟S102在第一頁面區(qū)中用table標簽劃分兩行兩列的四個區(qū)域，其中兩個分別為第一固定區(qū)和第二固定區(qū)，另兩個分別為第一可移動區(qū)和第二可移動區(qū)；第一固定區(qū)和第二固定區(qū)位于第一頁面區(qū)的頂端，兩個可移動區(qū)位于第一頁面區(qū)的底端，其中，鄰近預留區(qū)的為第一可移動區(qū)，另一個為第二可移動區(qū)；設置所述兩個頁面固定區(qū)的高度值，并設置table的高度及寬度100%繼承第一頁面區(qū)的高度及寬度；步驟S103將第一可移動區(qū)移動到預留區(qū)，形成預留固定區(qū)；步驟S104:第二可移動區(qū)自動填充第一可移動區(qū)，形成非固定區(qū)；非固定區(qū)的高度100%繼承第二可移動區(qū)的高度，使得非固定區(qū)的下邊緣與第一頁面區(qū)的下邊緣平齊，非固定區(qū)的寬度100%繼承第一頁面區(qū)的寬度，使得非固定區(qū)的左、右邊緣與第一頁面區(qū)的左、右邊緣平齊，從而實現(xiàn)非固定區(qū)的寬度及高度隨瀏覽器的高度/寬度自適應。步驟SlOl又包括步驟SlOll及步驟S1012。步驟SlOll在可視內容區(qū)內，將可視內容區(qū)的側邊向內收縮一個寬度值，形成第一頁面區(qū)，收縮的區(qū)域為預留區(qū)，所述預留區(qū)呈縱向貫穿整個可視內容區(qū)；步驟S1012:將第一頁面區(qū)設置為，如果第一頁面區(qū)超出可視內容區(qū)，則超出部分被剪切，且第一頁面區(qū)的高度100%繼承可視內容區(qū)的高度，實現(xiàn)第一頁面區(qū)的底邊與瀏覽器邊緣平齊。步驟S102包括又包括步驟S1021及步驟S1022。步驟S1021:將第一固定區(qū)與第二固定區(qū)合并為頁面固定區(qū)，該頁面固定區(qū)垂直相交于所述預留區(qū)，并設置該頁面固定區(qū)的高度值；步驟S1022:tablel00%繼承第一頁面區(qū)的高度及寬度屬性，使得table劃分的所述四個區(qū)域的邊緣分別與第一頁面區(qū)的邊緣平齊。在步驟S103中設置第一可移動區(qū)絕對定位在預留區(qū)的位置，其寬度與步驟SlOll中的預留區(qū)的寬度值相等，形成預留固定區(qū)，并設置該預留固定區(qū)的頂端與第一頁面區(qū)平齊。還包括步驟S105:設定該非固定區(qū)顯示的內容。還包括步驟S106:當瀏覽器為非IE內核解析時，非固定區(qū)高度與第二可移動區(qū)的高度相等，在非固定區(qū)中能夠完整顯示引入的頁面；當瀏覽器為IE內核解析時，設置非固定區(qū)引入頁面的內邊距與所述橫向的頁面固定區(qū)域的高度值相同，僅供IE瀏覽器識另U，實現(xiàn)在非固定區(qū)中完整顯示引入的頁面。一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，包括以下步驟步驟S201:對可視內容區(qū)內設置第一頁面區(qū)，第一頁面區(qū)距可視內容區(qū)的頂端預留一個預留區(qū)；步驟S202在第一頁面區(qū)中用table標簽劃分兩行兩列的四個區(qū)域，其中兩個分別為第一固定區(qū)和第二固定區(qū)，另兩個分別為第一可移動區(qū)和第二可移動區(qū)；第一固定區(qū)和第二固定區(qū)位于第一頁面區(qū)的左側，兩個可移動區(qū)位于第一頁面區(qū)的右側，其中，鄰近預留區(qū)的為第一可移動區(qū)，另一個為第二可移動區(qū)；設置所述兩個頁面固定區(qū)的寬度值，并設置table的高度及寬度100%繼承第一頁面區(qū)的高度及寬度；步驟S203將第一可移動區(qū)移動到預留區(qū)，形成預留固定區(qū)；步驟S204:第二可移動區(qū)自動填充第一可移動區(qū)，形成非固定區(qū)；非固定區(qū)的寬度100%繼承第二可移動區(qū)的寬度，使得非固定區(qū)的右邊緣與第一頁面區(qū)的右邊緣平齊，非固定區(qū)的高度100%繼承第一頁面區(qū)的高度，使得非固定區(qū)的上、下邊緣與第一頁面區(qū)的上、下邊緣平齊，從而實現(xiàn)非固定區(qū)的寬度及高度隨瀏覽器的高度/寬度自適應。步驟S201包括又包括步驟S2011及步驟S2012。步驟S2011:在可視內容區(qū)內，將可視內容區(qū)的頂端向內收縮一個高度值，形成第一頁面區(qū)，收縮的區(qū)域為預留區(qū)，所述預留區(qū)呈橫向貫穿整個可視內容區(qū)；步驟S2012:將第一頁面區(qū)設置為，如果第一頁面區(qū)超出可視內容區(qū)，則超出部分被剪切，且第一頁面區(qū)的寬度100%繼承可視內容區(qū)的寬度，實現(xiàn)第一頁面區(qū)的左、右邊緣與瀏覽器左、右邊緣平齊。步驟S202包括又包括步驟S2011及步驟S2012。步驟S2021:將第一固定區(qū)與第二固定區(qū)合并為頁面固定區(qū)，該頁面固定區(qū)垂直相交于所述預留區(qū)，并設置該頁面固定區(qū)的寬度值；步驟S2022:tablel00%繼承第一頁面區(qū)的高度及寬度屬性，使得table劃分的所述四個區(qū)域的邊緣分別與第一頁面區(qū)的邊緣平齊。在步驟S203中設置第一可移動區(qū)絕對定位在預留區(qū)的位置，其高度與步驟S2011中的預留區(qū)的高度值相等，形成預留固定區(qū)，并設置該預留固定區(qū)的頂端與第一頁面區(qū)平齊。還包括步驟S205:設定該非固定區(qū)顯示的內容。還包括步驟S206:當瀏覽器為非IE內核解析時，非固定區(qū)寬度與第二可移動區(qū)的寬度相等，在非固定區(qū)中能夠完整顯示引入的頁面；當瀏覽器為IE內核解析時，設置非固定區(qū)引入頁面的內邊距與所述頁面固定區(qū)域的寬度值相同，僅供IE瀏覽器識別，實現(xiàn)在非固定區(qū)中完整顯示引入的頁面。本發(fā)明的有益效果在于，利用table、iframe的高度/寬度按比例繼承的屬性，使得在Web頁面的高度/寬度有固定預留的情況下，預留固定區(qū)域之外的非固定區(qū)域能夠進行高度/寬度自適應，非固定區(qū)域仍然能夠正確顯示。由此，使用本方法進行Web頁面編輯，步驟更為簡單，利用CSS自身所具有的特性，加快了頁面讀取加載的速度；同時，不通過JS獲取當前窗口的高度/寬度值，解決了瀏覽器不支持或者禁用JS所造成的頁面錯亂的問題。圖1為本發(fā)明第一實施例的步驟流程圖。圖2為本發(fā)明第一實施例瀏覽器整體示意圖。圖3為本發(fā)明第一實施例可視內容區(qū)的實施過程示意圖。圖4為本發(fā)明第一實施例在可視內容區(qū)內的實施效果示意圖。圖5a為本發(fā)明第一實施例在可視內容區(qū)內的IE內核瀏覽器解析過程示意圖。圖5b為本發(fā)明第一實施例在可視內容區(qū)內的非IE內核瀏覽器解析過程示意圖。圖6為本發(fā)明第二實施例在可視內容區(qū)內的實施效果示意圖。圖7為本發(fā)明第三實施例的步驟流程圖。圖8為本發(fā)明第三實施例在可視內容區(qū)內的實施效果示意圖。具體實施例方式在Web頁面中，除了頁面頂端和底端需要預留地址欄、菜單欄等工具欄固定區(qū)域之外，就是瀏覽器的可視內容區(qū)。在可視內容區(qū)的頂端、左右兩側通常還要設置用來放置公司LOGO、廣告、導航欄等的固定區(qū)域，被這些固定區(qū)域包圍的區(qū)域則為頁面的非固定區(qū)，為了Web頁面的統(tǒng)一，這些固定區(qū)域通常具有預定的寬度或高度。本發(fā)明就是解決Web頁面主內容顯示區(qū)域的高度/寬度隨瀏覽器的高度/寬度自適應的問題。用層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器的高度/寬度自適應方法兼容瀏覽器內核ie6、ie7、ie8、firefox2.0、firefox3.0、Safari、Opera、chrome。以下按照預留區(qū)域設置方向及分布于瀏覽器位置的不同，分別以實施例1、2、3舉例說明如下實施例1參見圖2所示，為本發(fā)明第一實施例瀏覽器整體示意圖，瀏覽器頂端為固定的工具欄區(qū)，用來設置地址欄、菜單欄等，工具欄區(qū)下部為瀏覽器的可視內容區(qū)，用于顯示W(wǎng)eb頁面的相關內容，本發(fā)明的方法涉及對瀏覽器可視內容區(qū)的操作。結合圖3、4所示，本發(fā)明第一實施例可視內容區(qū)自適應的實施過程示意圖，以下結合步驟流程圖1，作詳細說明步驟SlOl在可視內容區(qū)內設置第一頁面區(qū)的同時，在可視內容區(qū)的側邊預留一個預留區(qū)。具體又可分為步驟S1011、步驟S1012兩個子步驟步驟SlOll在可視內容區(qū)內，將可視內容區(qū)的左側邊向右收縮一個寬度值W，形成第一頁面區(qū)，收縮的區(qū)域為預留區(qū)，所述預留區(qū)呈縱向貫穿整個可視內容區(qū)。其中，W是變量，在瀏覽器可顯示的寬度范圍內，根據(jù)需要靈活設置。第一頁面區(qū)域用body表示，設置為相對定位，position:relative；(本發(fā)明實施例的程序用XHTML和CSS語言編寫)，預留body左側頁邊距padding-left值為W，在本實施例中，左側縱向固定區(qū)域的寬度W設為160px;body{padding-left:160px；}。步驟S1012:將第一頁面區(qū)設置為，如果第一頁面區(qū)超出可視內容區(qū)，則超出部分被剪切，且第一頁面區(qū)的高度100%繼承可視內容區(qū)的高度，實現(xiàn)第一頁面區(qū)的底邊與瀏覽器邊緣平齊。在第一頁面區(qū)內不設置滾動條，為第一頁面區(qū)域定義屬性，設置第一頁面區(qū)的內容不滾動顯示，scrolling="no",使右側第一頁面區(qū)域的底部始終與瀏覽器的底部平齊；設置第一頁面區(qū)的高度100%繼承可視內容區(qū)的高度，當顯示的內容溢出瀏覽器(可視內容區(qū))的下邊框時，該溢出內容被剪切為不可見，結合圖5所示，被剪切部分位于第一頁面區(qū)的底端；html,body{height:100%；overflow:hidden；position:relative；}步驟S102在第一頁面區(qū)中用table標簽劃分兩行兩列的四個區(qū)域，其中兩個分別為第一固定區(qū)和第二固定區(qū)，另兩個分別為第一可移動區(qū)和第二可移動區(qū)；第一固定區(qū)和第二固定區(qū)位于第一頁面區(qū)的頂端，兩個可移動區(qū)位于第一頁面區(qū)的底端，其中，鄰近預留區(qū)的為第一可移動區(qū)，另一個為第二可移動區(qū)；設置所述兩個頁面固定區(qū)的高度值，并設置table的高度及寬度100%繼承第一頁面區(qū)的高度及寬度。具體又可分為步驟S1021、步驟S1022兩個子步驟步驟S1021:將第一固定區(qū)與第二固定區(qū)合并為頁面固定區(qū)，該頁面固定區(qū)垂直相交于所述預留區(qū)，并設置該頁面固定區(qū)的高度值。結合圖3所示，用table將第一頁面區(qū)劃分出“田”字型的四個區(qū)域，頂端兩個區(qū)從左向右為第一固定區(qū)及第二固定區(qū)，底端兩個區(qū)從左向右為第一可移動區(qū)及第二可移動區(qū)。將第一頁面區(qū)頂端的第一固定區(qū)和第二固定區(qū)合并，形成橫向的頁面固定區(qū)，該橫向頁面固定區(qū)貫穿所述第一頁面區(qū)域并垂直于預留區(qū)，設置所述頁面固定區(qū)域的高度值H為76px；<tdcolspan="2"style="height:76px；“><divclass="head">步驟S1022:tablel00%繼承第一頁面區(qū)的高度及寬度屬性，使得table劃分的所述四個區(qū)域的邊緣分別與第一頁面區(qū)的各邊緣平齊。〈tablestyle=〃width:100%；height:100%；“cellpadding=〃0〃cellspacing=〃0〃>步驟S103:將第一可移動區(qū)移動到預留區(qū)，形成預留固定區(qū)。預留固定區(qū)用left表示，style="height:100%；〃實現(xiàn)預留固定區(qū)的高度自適應。設置預留固定區(qū)絕對定位，頂部對齊(top:0)，底部對齊(bottom:0)，使得預留固定區(qū)的頂部及底部與第一頁面區(qū)平齊。設置預留固定區(qū)的寬度與步驟SlOll中的預留區(qū)的寬度值相等，都為W；<tdvalign=“top"style="height:100%；“><divclass=“l(fā)eft“style=“display:inline；float:left；margin—left:_160px；height:100%；position:absolute；top:0；bottom:0；width:160px；">步驟S104:第二可移動區(qū)自動填充第一可移動區(qū)，形成非固定區(qū)；非固定區(qū)的高度100%繼承第二可移動區(qū)的高度，使得非固定區(qū)的下邊緣與第一頁面區(qū)的下邊緣平齊，非固定區(qū)的寬度100%繼承第一頁面區(qū)的寬度，使得非固定區(qū)的左右邊緣與第一頁面區(qū)的左右邊緣平齊，從而實現(xiàn)非固定區(qū)的寬度及高度隨瀏覽器的高度/寬度自適應。(1)非固定區(qū)為iframe，設置顯示的數(shù)據(jù)格式為“頂端垂直對齊”，《tdvalign="top">(2)設置非固定區(qū)的height百分比數(shù)值設為100%；<tdstyle="height:100%；‘‘valign="top">(3)設置非固定區(qū)的屬性四周頁邊距為0，頁面內容滾動顯示，當內容溢出時，可滾動顯示溢出的內容，非固定區(qū)的寬度100%繼承第一頁面區(qū)的寬度；<iframemarginheight=“0〃marginwidth=“0〃frameborder=“0〃scrolling="yes"style="width:100%；height:100%；overflow:visible；“步驟S105:設定該非固定區(qū)域顯示的內容。在非固定區(qū)顯示“shouye.html”頁面；src=〃shouye.html"></iframe>“shouye.html”頁面是非固定區(qū)的一個頁面，這個頁面可以任意高度，通過非固定區(qū)引入，都可以完整顯示。步驟S106:當瀏覽器為非IE內核解析時，非固定區(qū)高度與第二可移動區(qū)的高度相等，在非固定區(qū)中能夠完整顯示引入的“shouye.html”頁面；當瀏覽器為IE內核解析時，設置非固定區(qū)引入頁面的內邊距與所述橫向的頁面固定區(qū)域的高度值相同，僅供IE瀏覽器識別，實現(xiàn)在非固定區(qū)中完整顯示引入的頁面。由于在步驟S1012中已設置第一頁面區(qū)超出可視內容區(qū)的高度為被剪切區(qū)，被剪切區(qū)位于可視內容區(qū)的底端，其高度為H。第二可移動區(qū)的高度為Ha，頁面固定區(qū)的高度設置為H，非固定區(qū)的高度為H2。當瀏覽器為非IE內核解析時，如圖5a所示，第二可移動區(qū)的高度與非固定區(qū)的高度相等，Ha=H2。高度為H2的非固定區(qū)實現(xiàn)隨第二可移動區(qū)的瀏覽器高度Ha的自適應，即在非固定區(qū)中能夠完整顯示引入的“shouye.html”頁面。本發(fā)明明層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器的高度/寬度自適應方法兼容非IE內核瀏覽器，如firefOX2.0、firefox3.0、Safari、Opera、chrome等當瀏覽器為正內核解析時，如圖5b所示，H2=Ha_H。由于第一頁面區(qū)是設置溢出隱藏的，如果不設置非固定區(qū)引入頁面的內底邊距*padding-bottom:Hpx來兼容IE內核的瀏覽器，那么在IE內核的視窗下，非固定區(qū)引入頁面底部內容將被隱藏，無法完整顯示。為了使非固定區(qū)中引入的“shouye.html”頁面能夠得到完整的顯示，通過為非固定區(qū)設置底邊頁邊距(高度H)的方式，在非固定區(qū)的底端顯示被剪切區(qū)域的內容。本發(fā)明明層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器的高度/寬度自適應方法兼容IE內核瀏覽器，如ie6，ie7，ie8等。為非固定區(qū)設置內邊距屬性*padding-bottom:Hpx；其中H值等于頁面固定區(qū)的高度值(76px)，星號表示只有IE瀏覽器識別。<head><metacontent="text/html;charset=utf-8"http—equiv=〃Content-Type"/><title>非固定區(qū)高度自適應</title><styletype="text/ess"></style></head>〈bodystyle='’*padding-bottom:76px；‘’><divstyle=“font-size:28px；height:2000px；“>非固定內容區(qū)域</div>這是是內容頁最底部</body>0101]</html>0102]本實施例最終的實施效果圖如圖4所示。0103]實施例1的完整程序代碼如下0104]<head>0105]<metahttp—equiv=〃Content—Type"content="text/html；charset=utf-8"/>0106]<title>無標題l</title><styletype="text/ess">*{margin:0；padding:0；}html,body{height:100%；position:relative；overflow:hidden；}body{padding-left:160px；}.table{width:100%；height:100%；border:0；border-collapse:collapse；empty-cells:show；}</style></head>〈bodyscrolling=〃no">〈tableheight=〃100%"width="100%"cellpadding=〃0〃cellspacing=〃0〃><tr><tdheight="76px〃colspan=〃2"style="background—color:black〃><divclass="head"style="color:white">我是頂部固定區(qū)域</div></td></tr><tr><tdvalign="top"style="height:100%；“><divclass="left"style="display:inline;float:left；margin-left:~160px；height:100%；position:absolute；top:0；bottom:0；width:160px；background:gray">我是左側固定區(qū)域</div></td><tdheight="100%"valign="top"><iframescrolling=〃yes"frameborder="0〃src="shouye.html“style="overflow:visible；width:100%；height:100%；“marginwidth=〃0〃marginheight=〃0〃></iframe></td></tr>10</table></body></html>實施例2:如圖6所示，為本發(fā)明第二實施例在可視內容區(qū)內的實施效果示意圖，本實施例與實施例1的區(qū)別僅在于，將預留區(qū)設置在第一頁面區(qū)的右側，非固定區(qū)的高度及寬度隨瀏覽器的高度/寬度自適應的實施原理及方法與實施例1相同，不再詳述。實施例3:參見圖8所示，為本發(fā)明第三實施例在可視內容區(qū)內的實施效果示意圖，本實施例與實施例1的區(qū)別在于，預留區(qū)域設置在第一頁面區(qū)的頂端，高度為H，第一固定區(qū)及第二固定區(qū)設置在第一頁面區(qū)的左側，二者合并為頁面固定區(qū)，寬度為W。結合圖7本發(fā)明第三實施例的步驟流程圖，本發(fā)明第三實施例的具體實施過程如下一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，包括以下步驟步驟S201:對可視內容區(qū)內設置第一頁面區(qū)，第一頁面區(qū)距可視內容區(qū)的頂端預留一個預留區(qū)；步驟S202在第一頁面區(qū)中用table標簽劃分兩行兩列的四個區(qū)域，其中兩個分別為第一固定區(qū)和第二固定區(qū)，另兩個分別為第一可移動區(qū)和第二可移動區(qū)；第一固定區(qū)和第二固定區(qū)位于第一頁面區(qū)的左側，兩個可移動區(qū)位于第一頁面區(qū)的右側，其中，鄰近預留區(qū)的為第一可移動區(qū)，另一個為第二可移動區(qū)；設置所述兩個頁面固定區(qū)的寬度值，并設置table的高度及寬度100%繼承第一頁面區(qū)的高度及寬度；步驟S203將第一可移動區(qū)移動到預留區(qū)，形成預留固定區(qū)；步驟S204:第二可移動區(qū)自動填充第一可移動區(qū)，形成非固定區(qū)；非固定區(qū)的寬度100%繼承第二可移動區(qū)的寬度，使得非固定區(qū)的右邊緣與第一頁面區(qū)的右邊緣平齊，非固定區(qū)的高度100%繼承第一頁面區(qū)的高度，使得非固定區(qū)的上、下邊緣與第一頁面區(qū)的上、下邊緣平齊，從而實現(xiàn)非固定區(qū)的寬度及高度隨瀏覽器的高度/寬度自適應。其中步驟S201又包括S2011及步驟S2012兩個子步驟步驟S2011:在可視內容區(qū)內，將可視內容區(qū)的頂端向內收縮一個高度值，形成第一頁面區(qū)，收縮的區(qū)域為預留區(qū)，所述預留區(qū)呈橫向貫穿整個可視內容區(qū)；步驟S2012:將第一頁面區(qū)設置為，如果第一頁面區(qū)超出可視內容區(qū)，則超出部分被剪切，且第一頁面區(qū)的寬度100%繼承可視內容區(qū)的寬度，實現(xiàn)第一頁面區(qū)的左、右邊緣與瀏覽器左、右邊緣平齊。步驟S202又包括S2021及步驟S2022兩個子步驟步驟S2021:將第一固定區(qū)與第二固定區(qū)合并為頁面固定區(qū)，該頁面固定區(qū)垂直相交于所述預留區(qū)，并設置該頁面固定區(qū)的寬度值；步驟S2022:tablel00%繼承第一頁面區(qū)的高度及寬度屬性，使得table劃分的所述四個區(qū)域的邊緣分別與第一頁面區(qū)的邊緣平齊。在步驟S203中設置第一可移動區(qū)絕對定位在預留區(qū)的位置，其高度與步驟S2011中的預留區(qū)的高度值相等，形成預留固定區(qū)，并設置該預留固定區(qū)的頂端與第一頁面區(qū)平齊。還包括步驟S205:設定該非固定區(qū)顯示的內容。還包括步驟S206:當瀏覽器為非IE內核解析時，非固定區(qū)寬度與第二可移動區(qū)的寬度相等，在非固定區(qū)中能夠完整顯示引入的“shouye.html”頁面；當瀏覽器為IE內核解析時，設置非固定區(qū)引入頁面的內邊距與所述頁面固定區(qū)域的寬度值相同，僅供IE瀏覽器識別，實現(xiàn)在非固定區(qū)中完整顯示引入的頁面。應當理解，這里描述的實施例是示意性的而非限制性的。本領域技術人員通過閱讀說明書，可以對本發(fā)明的技術方案有更好的了解，并可以在本發(fā)明的精神和宗旨下對本發(fā)明的實施例進行各種修改和變型。本發(fā)明的保護范圍僅由隨附權利要求書限定。1權利要求1.一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于包括以下步驟步驟SlOl:對可視內容區(qū)設置第一頁面區(qū)，第一頁面區(qū)距可視內容區(qū)的側邊預留一個預留區(qū)；步驟S102:在第一頁面區(qū)中用table標簽劃分兩行兩列的四個區(qū)域，其中兩個分別為第一固定區(qū)和第二固定區(qū)，另兩個分別為第一可移動區(qū)和第二可移動區(qū)；第一固定區(qū)和第二固定區(qū)位于第一頁面區(qū)的頂端，兩個可移動區(qū)位于第一頁面區(qū)的底端，其中，鄰近預留區(qū)的為第一可移動區(qū)，另一個為第二可移動區(qū)；設置所述兩個頁面固定區(qū)的高度值，并設置table的高度及寬度100%繼承第一頁面區(qū)的高度及寬度；步驟S103:將第一可移動區(qū)移動到預留區(qū)，形成預留固定區(qū)；步驟S104:第二可移動區(qū)自動填充第一可移動區(qū)，形成非固定區(qū)；非固定區(qū)的高度100%繼承第二可移動區(qū)的高度，使得非固定區(qū)的下邊緣與第一頁面區(qū)的下邊緣平齊，非固定區(qū)的寬度100%繼承第一頁面區(qū)的寬度，使得非固定區(qū)的左、右邊緣與第一頁面區(qū)的左、右邊緣平齊，從而實現(xiàn)非固定區(qū)的寬度及高度隨瀏覽器的高度/寬度自適應。2.如權利要求1所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，步驟SlOl包括步驟SlOll在可視內容區(qū)內，將可視內容區(qū)的側邊向內收縮一個寬度值，形成第一頁面區(qū)，收縮的區(qū)域為預留區(qū)，所述預留區(qū)呈縱向貫穿整個可視內容區(qū)；步驟S1012:將第一頁面區(qū)設置為，如果第一頁面區(qū)超出可視內容區(qū)，則超出部分被剪切，且第一頁面區(qū)的高度100%繼承可視內容區(qū)的高度，實現(xiàn)第一頁面區(qū)的底邊與瀏覽器邊緣平齊。3.如權利要求1所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，步驟S102包括步驟S1021:將第一固定區(qū)與第二固定區(qū)合并為頁面固定區(qū)，該頁面固定區(qū)垂直相交于所述預留區(qū)，并設置該頁面固定區(qū)的高度值；步驟S1022:tablel00%繼承第一頁面區(qū)的高度及寬度屬性，使得table劃分的所述四個區(qū)域的邊緣分別與第一頁面區(qū)的邊緣平齊。4.如權利要求2所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，在步驟S103中設置第一可移動區(qū)絕對定位在預留區(qū)的位置，其寬度與步驟SlOll中的預留區(qū)的寬度值相等，形成預留固定區(qū)，并設置該預留固定區(qū)的頂端與第一頁面區(qū)平齊。5.如權利要求1-4任一項所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，還包括步驟S105:設定該非固定區(qū)顯示的內容。6.如權利要求5所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，還包括步驟S106:當瀏覽器為非IE內核解析時，非固定區(qū)高度與第二可移動區(qū)的高度相等，在非固定區(qū)中能夠完整顯示引入的頁面；當瀏覽器為IE內核解析時，設置非固定區(qū)引入頁面的內邊距與所述橫向的頁面固定區(qū)域的高度值相同，僅供IE瀏覽器識別，實現(xiàn)在非固定區(qū)中完整顯示引入的頁面。7.—種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于包括以下步驟步驟S201:對可視內容區(qū)內設置第一頁面區(qū)，第一頁面區(qū)距可視內容區(qū)的頂端預留一個預留區(qū)；步驟S202:在第一頁面區(qū)中用table標簽劃分兩行兩列的四個區(qū)域，其中兩個分別為第一固定區(qū)和第二固定區(qū)，另兩個分別為第一可移動區(qū)和第二可移動區(qū)；第一固定區(qū)和第二固定區(qū)位于第一頁面區(qū)的左側，兩個可移動區(qū)位于第一頁面區(qū)的右側，其中，鄰近預留區(qū)的為第一可移動區(qū)，另一個為第二可移動區(qū)；設置所述兩個頁面固定區(qū)的寬度值，并設置table的高度及寬度100%繼承第一頁面區(qū)的高度及寬度；步驟S203:將第一可移動區(qū)移動到預留區(qū)，形成預留固定區(qū)；步驟S204:第二可移動區(qū)自動填充第一可移動區(qū)，形成非固定區(qū)；非固定區(qū)的寬度100%繼承第二可移動區(qū)的寬度，使得非固定區(qū)的右邊緣與第一頁面區(qū)的右邊緣平齊，非固定區(qū)的高度100%繼承第一頁面區(qū)的高度，使得非固定區(qū)的上、下邊緣與第一頁面區(qū)的上、下邊緣平齊，從而實現(xiàn)非固定區(qū)的寬度及高度隨瀏覽器的高度/寬度自適應。8.如權利要求7所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，步驟S201包括步驟S2011:在可視內容區(qū)內，將可視內容區(qū)的頂端向內收縮一個高度值，形成第一頁面區(qū)，收縮的區(qū)域為預留區(qū)，所述預留區(qū)呈橫向貫穿整個可視內容區(qū)；步驟S2012:將第一頁面區(qū)設置為，如果第一頁面區(qū)超出可視內容區(qū)，則超出部分被剪切，且第一頁面區(qū)的寬度100%繼承可視內容區(qū)的寬度，實現(xiàn)第一頁面區(qū)的左、右邊緣與瀏覽器左、右邊緣平齊。9.如權利要求7所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，步驟S202包括步驟S2021:將第一固定區(qū)與第二固定區(qū)合并為頁面固定區(qū)，該頁面固定區(qū)垂直相交于所述預留區(qū)，并設置該頁面固定區(qū)的寬度值；步驟S2022:tablel00%繼承第一頁面區(qū)的高度及寬度屬性，使得table劃分的所述四個區(qū)域的邊緣分別與第一頁面區(qū)的邊緣平齊。10.如權利要求8所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，在步驟S203中設置第一可移動區(qū)絕對定位在預留區(qū)的位置，其高度與步驟S2011中的預留區(qū)的高度值相等，形成預留固定區(qū)，并設置該預留固定區(qū)的頂端與第一頁面區(qū)平齊。11.如權利要求7-10任一項所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，還包括步驟S205:設定該非固定區(qū)顯示的內容。12.如權利要求11所述的一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，其特征在于，還包括步驟S206:當瀏覽器為非IE內核解析時，非固定區(qū)寬度與第二可移動區(qū)的寬度相等，在非固定區(qū)中能夠完整顯示引入的頁面；當瀏覽器為IE內核解析時，設置非固定區(qū)引入頁面的內邊距與所述頁面固定區(qū)域的寬度值相同，僅供IE瀏覽器識別，實現(xiàn)在非固定區(qū)中完整顯示引入的頁面。全文摘要一種層疊樣式表實現(xiàn)非固定區(qū)域隨瀏覽器高/寬度自適應方法，在可視內容區(qū)內設置第一頁面區(qū)的同時，在側邊預留一個預留區(qū)；在第一頁面區(qū)中用table劃分固定頁面區(qū)及兩個可移動區(qū)，設置頁面固定區(qū)的高度值，并設置table的高度及寬度100％繼承第一頁面區(qū)的高度及寬度；將第一可移動區(qū)移動到預留區(qū)，形成預留固定區(qū)；第二可移動區(qū)自動填充第一可移動區(qū)，形成非固定區(qū)；非固定區(qū)的高度100％繼承第二可移動區(qū)的高度，寬度100％繼承第一頁面區(qū)的寬度，使得非固定區(qū)的下邊緣、左、右邊緣分別與第一頁面區(qū)的下邊緣、左、右邊緣平齊，從而實現(xiàn)非固定區(qū)的寬度及高度隨瀏覽器的高度/寬度自適應。文檔編號G06F3/048GK102012787SQ20101055395公開日2011年4月13日申請日期2010年11月19日優(yōu)先權日2010年11月19日發(fā)明者和巍鋒,梅春,潘海東申請人:互動在線(北京)科技有限公司