[發明專利]層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法

有效

• 申請號: 201010553955.1
• 申請日: 2010-11-19
• 公開（公告）號: CN102012787A
• 公開（公告）日: 2011-04-13
• 發明（設計）人: 潘海東;梅春;和巍鋒
• 申請（專利權）人: 互動在線（北京）科技有限公司
• 主分類號: G06F3/048
• 分類號: G06F3/048
• 代理公司: 北京正理專利代理有限公司 11257
• 代理人: 張雪梅

1.一種層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法，其特征在于包括以下步驟：

步驟S101：對可視內容區設置第一頁面區，第一頁面區距可視內容區的側邊預留一個預留區；

步驟S102：在第一頁面區中用table標簽劃分兩行兩列的四個區域，其中兩個分別為第一固定區和第二固定區，另兩個分別為第一可移動區和第二可移動區；第一固定區和第二固定區位于第一頁面區的頂端，兩個可移動區位于第一頁面區的底端，其中，鄰近預留區的為第一可移動區，另一個為第二可移動區；設置所述兩個頁面固定區的高度值，并設置table的高度及寬度100％繼承第一頁面區的高度及寬度；

步驟S103：將第一可移動區移動到預留區，形成預留固定區；

步驟S104：第二可移動區自動填充第一可移動區，形成非固定區；非固定區的高度100％繼承第二可移動區的高度，使得非固定區的下邊緣與第一頁面區的下邊緣平齊，非固定區的寬度100％繼承第一頁面區的寬度，使得非固定區的左、右邊緣與第一頁面區的左、右邊緣平齊，從而實現非固定區的寬度及高度隨瀏覽器的高度/寬度自適應。

2.如權利要求1所述的一種層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法，其特征在于，步驟S101包括：

步驟S1011：在可視內容區內，將可視內容區的側邊向內收縮一個寬度值，形成第一頁面區，收縮的區域為預留區，所述預留區呈縱向貫穿整個可視內容區；

步驟S1012：將第一頁面區設置為，如果第一頁面區超出可視內容區，則超出部分被剪切，且第一頁面區的高度100％繼承可視內容區的高度，實現第一頁面區的底邊與瀏覽器邊緣平齊。

3.如權利要求1所述的一種層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法，其特征在于，步驟S102包括：

步驟S1021：將第一固定區與第二固定區合并為頁面固定區，該頁面固定區垂直相交于所述預留區，并設置該頁面固定區的高度值；

步驟S1022：table100％繼承第一頁面區的高度及寬度屬性，使得table劃分的所述四個區域的邊緣分別與第一頁面區的邊緣平齊。

4.如權利要求2所述的一種層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法，其特征在于，在步驟S103中設置第一可移動區絕對定位在預留區的位置，其寬度與步驟S1011中的預留區的寬度值相等，形成預留固定區，并設置該預留固定區的頂端與第一頁面區平齊。

5.如權利要求1-4任一項所述的一種層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法，其特征在于，還包括步驟S105：設定該非固定區顯示的內容。

6.如權利要求5所述的一種層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法，其特征在于，還包括步驟S106：當瀏覽器為非IE內核解析時，非固定區高度與第二可移動區的高度相等，在非固定區中能夠完整顯示引入的頁面；當瀏覽器為IE內核解析時，設置非固定區引入頁面的內邊距與所述橫向的頁面固定區域的高度值相同，僅供IE瀏覽器識別，實現在非固定區中完整顯示引入的頁面。

7.一種層疊樣式表實現非固定區域隨瀏覽器高/寬度自適應方法，其特征在于包括以下步驟：

步驟S201：對可視內容區內設置第一頁面區，第一頁面區距可視內容區的頂端預留一個預留區；

步驟S202：在第一頁面區中用table標簽劃分兩行兩列的四個區域，其中兩個分別為第一固定區和第二固定區，另兩個分別為第一可移動區和第二可移動區；第一固定區和第二固定區位于第一頁面區的左側，兩個可移動區位于第一頁面區的右側，其中，鄰近預留區的為第一可移動區，另一個為第二可移動區；設置所述兩個頁面固定區的寬度值，并設置table的高度及寬度100％繼承第一頁面區的高度及寬度；

步驟S203：將第一可移動區移動到預留區，形成預留固定區；

步驟S204：第二可移動區自動填充第一可移動區，形成非固定區；非固定區的寬度100％繼承第二可移動區的寬度，使得非固定區的右邊緣與第一頁面區的右邊緣平齊，非固定區的高度100％繼承第一頁面區的高度，使得非固定區的上、下邊緣與第一頁面區的上、下邊緣平齊，從而實現非固定區的寬度及高度隨瀏覽器的高度/寬度自適應。