CN102012787A - 层叠样式表实现非固定区域随浏览器高/宽度自适应方法 - Google Patents
层叠样式表实现非固定区域随浏览器高/宽度自适应方法 Download PDFInfo
- Publication number
- CN102012787A CN102012787A CN2010105539551A CN201010553955A CN102012787A CN 102012787 A CN102012787 A CN 102012787A CN 2010105539551 A CN2010105539551 A CN 2010105539551A CN 201010553955 A CN201010553955 A CN 201010553955A CN 102012787 A CN102012787 A CN 102012787A
- Authority
- CN
- China
- Prior art keywords
- district
- height
- fixed
- width
- page
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，在可视内容区内设置第一页面区的同时，在侧边预留一个预留区；在第一页面区中用table划分固定页面区及两个可移动区，设置页面固定区的高度值，并设置table的高度及宽度100％继承第一页面区的高度及宽度；将第一可移动区移动到预留区，形成预留固定区；第二可移动区自动填充第一可移动区，形成非固定区；非固定区的高度100％继承第二可移动区的高度，宽度100％继承第一页面区的宽度，使得非固定区的下边缘、左、右边缘分别与第一页面区的下边缘、左、右边缘平齐，从而实现非固定区的宽度及高度随浏览器的高度/宽度自适应。
Description
技术领域
本发明涉及一种新型的层叠样式表的运用，尤指一种利用层叠样式表实现非固定区域随浏览器的高度/宽度自适应方法，能够解决用户Web页面中非固定区域在各个浏览器、各种分辨率下的高度/宽度不能自适应问题。
背景技术
目前现有的层叠样式表(CSS，Cascading Style Sheet)实现非固定区域随浏览器的高度/宽度自适应方法主要有：通过JS(JavaScript)获取当前窗口的高度/宽度，再减去固定区域的一个高度/宽度值，把结果值作为高度/宽度赋给非固定区域。现有技术是通过如下的程序实现的：
document.getElementById(非固定区域id)＝document.body.scrollHeight-m+’px’
首先需要通过JavaScript获取当前窗口的高度/宽度值，另设固定区域的高度/宽度值，再将当前窗口的高度/宽度值减去该预设区域的高度/宽度值，将得到数值赋给非固定区域，作为非固定区域的高度/宽度。
在现有技术中，由于部分老式浏览器不支持JavaScript，如ie6以下的版本：ie5，ie5.5等，或者浏览器禁用了JavaScript，那么该方法将无法实现浏览器高度的自适应。
除此之外，现有技术还存在以下的不足：
1、由于现有的层叠样式表实现非固定区域随浏览器的高度/宽度自适应方法，是针对Web页面实际的高度的数值进行操作，得到的最终结果也是非固定区域的高度的具体数值，然而，在不同显示器、不同分辨率的情况下显示的结果可能不同，则可能会导致页面错乱的问题。
2、按照此种方法得到非固定区域的高度/宽度值，需要进行减法步骤获得非固定区域的高，在Web高访问的情况下，如：上千万次访问具有多个固定区域，且多个固定区域分布于整个网站的不同页面时，需要进行多次的减法步骤才能得到最终的非固定区域的高度/宽度，影响执行效率。
发明内容
本发明的目的在于，提供一种层叠样式表实现非固定区域随浏览器的高度自适应方法，解决浏览器禁用JS造成页面错乱的问题。
本发明的又一目的在于，提供一种层叠样式表实现非固定区域随浏览器的高度/宽度自适应方法，使得进行Web页面编辑的步骤更为简单，并加快了页面读取加载的速度。
为达到上述目的，本发明采用如下的技术手段：
一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，包括以下步骤：
步骤S101：对可视内容区设置第一页面区，第一页面区距可视内容区的侧边预留一个预留区；
步骤S102：在第一页面区中用table标签划分两行两列的四个区域，其中两个分别为第一固定区和第二固定区，另两个分别为第一可移动区和第二可移动区；第一固定区和第二固定区位于第一页面区的顶端，两个可移动区位于第一页面区的底端，其中，邻近预留区的为第一可移动区，另一个为第二可移动区；设置所述两个页面固定区的高度值，并设置table的高度及宽度100％继承第一页面区的高度及宽度；
步骤S103：将第一可移动区移动到预留区，形成预留固定区；
步骤S104：第二可移动区自动填充第一可移动区，形成非固定区；非固定区的高度100％继承第二可移动区的高度，使得非固定区的下边缘与第一页面区的下边缘平齐，非固定区的宽度100％继承第一页面区的宽度，使得非固定区的左、右边缘与第一页面区的左、右边缘平齐，从而实现非固定区的宽度及高度随浏览器的高度/宽度自适应。
步骤S101又包括步骤S1011及步骤S1012。
步骤S1011：在可视内容区内，将可视内容区的侧边向内收缩一个宽度值，形成第一页面区，收缩的区域为预留区，所述预留区呈纵向贯穿整个可视内容区；
步骤S1012：将第一页面区设置为，如果第一页面区超出可视内容区，则超出部分被剪切，且第一页面区的高度100％继承可视内容区的高度，实现第一页面区的底边与浏览器边缘平齐。
步骤S102包括又包括步骤S1021及步骤S1022。
步骤S1021：将第一固定区与第二固定区合并为页面固定区，该页面固定区垂直相交于所述预留区，并设置该页面固定区的高度值；
步骤S1022：table100％继承第一页面区的高度及宽度属性，使得table划分的所述四个区域的边缘分别与第一页面区的边缘平齐。
在步骤S103中设置第一可移动区绝对定位在预留区的位置，其宽度与步骤S1011中的预留区的宽度值相等，形成预留固定区，并设置该预留固定区的顶端与第一页面区平齐。
还包括步骤S105：设定该非固定区显示的内容。
还包括步骤S106：当浏览器为非IE内核解析时，非固定区高度与第二可移动区的高度相等，在非固定区中能够完整显示引入的页面；当浏览器为IE内核解析时，设置非固定区引入页面的内边距与所述横向的页面固定区域的高度值相同，仅供IE浏览器识别，实现在非固定区中完整显示引入的页面。
一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，包括以下步骤：
步骤S201：对可视内容区内设置第一页面区，第一页面区距可视内容区的顶端预留一个预留区；
步骤S202：在第一页面区中用table标签划分两行两列的四个区域，其中两个分别为第一固定区和第二固定区，另两个分别为第一可移动区和第二可移动区；第一固定区和第二固定区位于第一页面区的左侧，两个可移动区位于第一页面区的右侧，其中，邻近预留区的为第一可移动区，另一个为第二可移动区；设置所述两个页面固定区的宽度值，并设置table的高度及宽度100％继承第一页面区的高度及宽度；
步骤S203：将第一可移动区移动到预留区，形成预留固定区；
步骤S204：第二可移动区自动填充第一可移动区，形成非固定区；非固定区的宽度100％继承第二可移动区的宽度，使得非固定区的右边缘与第一页面区的右边缘平齐，非固定区的高度100％继承第一页面区的高度，使得非固定区的上、下边缘与第一页面区的上、下边缘平齐，从而实现非固定区的宽度及高度随浏览器的高度/宽度自适应。
步骤S201包括又包括步骤S2011及步骤S2012。
步骤S2011：在可视内容区内，将可视内容区的顶端向内收缩一个高度值，形成第一页面区，收缩的区域为预留区，所述预留区呈横向贯穿整个可视内容区；
步骤S2012：将第一页面区设置为，如果第一页面区超出可视内容区，则超出部分被剪切，且第一页面区的宽度100％继承可视内容区的宽度，实现第一页面区的左、右边缘与浏览器左、右边缘平齐。
步骤S202包括又包括步骤S2011及步骤S2012。
步骤S2021：将第一固定区与第二固定区合并为页面固定区，该页面固定区垂直相交于所述预留区，并设置该页面固定区的宽度值；
步骤S2022：table100％继承第一页面区的高度及宽度属性，使得table划分的所述四个区域的边缘分别与第一页面区的边缘平齐。
在步骤S203中设置第一可移动区绝对定位在预留区的位置，其高度与步骤S2011中的预留区的高度值相等，形成预留固定区，并设置该预留固定区的顶端与第一页面区平齐。
还包括步骤S205：设定该非固定区显示的内容。
还包括步骤S206：当浏览器为非IE内核解析时，非固定区宽度与第二可移动区的宽度相等，在非固定区中能够完整显示引入的页面；当浏览器为IE内核解析时，设置非固定区引入页面的内边距与所述页面固定区域的宽度值相同，仅供IE浏览器识别，实现在非固定区中完整显示引入的页面。
本发明的有益效果在于，利用table、iframe的高度/宽度按比例继承的属性，使得在Web页面的高度/宽度有固定预留的情况下，预留固定区域之外的非固定区域能够进行高度/宽度自适应，非固定区域仍然能够正确显示。由此，使用本方法进行Web页面编辑，步骤更为简单，利用CSS自身所具有的特性，加快了页面读取加载的速度；同时，不通过JS获取当前窗口的高度/宽度值，解决了浏览器不支持或者禁用JS所造成的页面错乱的问题。
附图说明
图1为本发明第一实施例的步骤流程图。
图2为本发明第一实施例浏览器整体示意图。
图3为本发明第一实施例可视内容区的实施过程示意图。
图4为本发明第一实施例在可视内容区内的实施效果示意图。
图5a为本发明第一实施例在可视内容区内的IE内核浏览器解析过程示意图。
图5b为本发明第一实施例在可视内容区内的非IE内核浏览器解析过程示意图。
图6为本发明第二实施例在可视内容区内的实施效果示意图。
图7为本发明第三实施例的步骤流程图。
图8为本发明第三实施例在可视内容区内的实施效果示意图。
具体实施方式
在Web页面中，除了页面顶端和底端需要预留地址栏、菜单栏等工具栏固定区域之外，就是浏览器的可视内容区。在可视内容区的顶端、左右两侧通常还要设置用来放置公司LOGO、广告、导航栏等的固定区域，被这些固定区域包围的区域则为页面的非固定区，为了Web页面的统一，这些固定区域通常具有预定的宽度或高度。本发明就是解决Web页面主内容显示区域的高度/宽度随浏览器的高度/宽度自适应的问题。
用层叠样式表实现非固定区域随浏览器的高度/宽度自适应方法兼容浏览器内核ie6、ie7、ie8、firefox2.0、firefox3.0、Safari、Opera、chrome。
以下按照预留区域设置方向及分布于浏览器位置的不同，分别以实施例1、2、3举例说明如下：
实施例1：
参见图2所示，为本发明第一实施例浏览器整体示意图，浏览器顶端为固定的工具栏区，用来设置地址栏、菜单栏等，工具栏区下部为浏览器的可视内容区，用于显示Web页面的相关内容，本发明的方法涉及对浏览器可视内容区的操作。
结合图3、4所示，本发明第一实施例可视内容区自适应的实施过程示意图，以下结合步骤流程图1，作详细说明：
步骤S101：在可视内容区内设置第一页面区的同时，在可视内容区的侧边预留一个预留区。具体又可分为步骤S1011、步骤S1012两个子步骤：
步骤S1011：在可视内容区内，将可视内容区的左侧边向右收缩一个宽度值W，形成第一页面区，收缩的区域为预留区，所述预留区呈纵向贯穿整个可视内容区。
其中，W是变量，在浏览器可显示的宽度范围内，根据需要灵活设置。
第一页面区域用body表示，设置为相对定位，position:relative；(本发明实施例的程序用XHTML和CSS语言编写)，预留body左侧页边距padding-left值为W，在本实施例中，左侧纵向固定区域的宽度W设为160px；body{padding-left:160px；}。
步骤S1012：将第一页面区设置为，如果第一页面区超出可视内容区，则超出部分被剪切，且第一页面区的高度100％继承可视内容区的高度，实现第一页面区的底边与浏览器边缘平齐。
在第一页面区内不设置滚动条，为第一页面区域定义属性，设置第一页面区的内容不滚动显示，scrolling＝″no″，使右侧第一页面区域的底部始终与浏览器的底部平齐；设置第一页面区的高度100％继承可视内容区的高度，当显示的内容溢出浏览器(可视内容区)的下边框时，该溢出内容被剪切为不可见，结合图5所示，被剪切部分位于第一页面区的底端；
html，body{height:100％；overflow:hidden；position:relative；}
步骤S102：在第一页面区中用table标签划分两行两列的四个区域，其中两个分别为第一固定区和第二固定区，另两个分别为第一可移动区和第二可移动区；第一固定区和第二固定区位于第一页面区的顶端，两个可移动区位于第一页面区的底端，其中，邻近预留区的为第一可移动区，另一个为第二可移动区；设置所述两个页面固定区的高度值，并设置table的高度及宽度100％继承第一页面区的高度及宽度。具体又可分为步骤S1021、步骤S1022两个子步骤：
步骤S1021：将第一固定区与第二固定区合并为页面固定区，该页面固定区垂直相交于所述预留区，并设置该页面固定区的高度值。
结合图3所示，用table将第一页面区划分出“田”字型的四个区域，顶端两个区从左向右为第一固定区及第二固定区，底端两个区从左向右为第一可移动区及第二可移动区。
将第一页面区顶端的第一固定区和第二固定区合并，形成横向的页面固定区，该横向页面固定区贯穿所述第一页面区域并垂直于预留区，设置所述页面固定区域的高度值H为76px；
<td colspan＝″2″style＝″height:76px；″>
<div class＝″head″>
步骤S1022：table100％继承第一页面区的高度及宽度属性，使得table划分的所述四个区域的边缘分别与第一页面区的各边缘平齐。
<table style＝″width:100％；height:100％；″cellpadding＝″0″cellspacing＝″0″>
步骤S103：将第一可移动区移动到预留区，形成预留固定区。
预留固定区用left表示，style＝″height:100％；″实现预留固定区的高度自适应。设置预留固定区绝对定位，顶部对齐(top：0)，底部对齐(bottom：0)，使得预留固定区的顶部及底部与第一页面区平齐。
设置预留固定区的宽度与步骤S1011中的预留区的宽度值相等，都为W；
<td valign＝″top″style＝″height:100％；″>
<div class＝″left″style＝″display:inline；float:left；margin-left:-160px；height:100％；position:absolute；top:0；bottom:0；width:160px；″>
步骤S104：第二可移动区自动填充第一可移动区，形成非固定区；非固定区的高度100％继承第二可移动区的高度，使得非固定区的下边缘与第一页面区的下边缘平齐，非固定区的宽度100％继承第一页面区的宽度，使得非固定区的左右边缘与第一页面区的左右边缘平齐，从而实现非固定区的宽度及高度随浏览器的高度/宽度自适应。
(1)非固定区为iframe，设置显示的数据格式为“顶端垂直对齐”，<tdvalign＝″top″>
(2)设置非固定区的height百分比数值设为100％；<tdstyle＝″height:100％；″valign＝″top″>
(3)设置非固定区的属性：四周页边距为0，页面内容滚动显示，当内容溢出时，可滚动显示溢出的内容，非固定区的宽度100％继承第一页面区的宽度；
<iframe marginheight＝″0″marginwidth＝″0″frameborder＝″0″scrolling＝″yes″style＝″width:100％；height:100％；overflow:visible；″
步骤S105：设定该非固定区域显示的内容。
在非固定区显示“shouye.html”页面；src＝″shouye.html″></iframe>
“shouye.html”页面是非固定区的一个页面，这个页面可以任意高度，通过非固定区引入，都可以完整显示。
步骤S106：当浏览器为非IE内核解析时，非固定区高度与第二可移动区的高度相等，在非固定区中能够完整显示引入的“shouye.html”页面；当浏览器为IE内核解析时，设置非固定区引入页面的内边距与所述横向的页面固定区域的高度值相同，仅供IE浏览器识别，实现在非固定区中完整显示引入的页面。
由于在步骤S1012中已设置第一页面区超出可视内容区的高度为被剪切区，被剪切区位于可视内容区的底端，其高度为H。第二可移动区的高度为Ha，页面固定区的高度设置为H，非固定区的高度为H2。
当浏览器为非IE内核解析时，如图5a所示，第二可移动区的高度与非固定区的高度相等，Ha＝H2。高度为H2的非固定区实现随第二可移动区的浏览器高度Ha的自适应，即在非固定区中能够完整显示引入的“shouye.html”页面。本发明明层叠样式表实现非固定区域随浏览器的高度/宽度自适应方法兼容非IE内核浏览器，如：firefox2.0、firefox3.0、Safari、Opera、chrome等
当浏览器为IE内核解析时，如图5b所示，H2＝Ha-H。由于第一页面区是设置溢出隐藏的，如果不设置非固定区引入页面的内底边距*padding-bottom:Hpx来兼容IE内核的浏览器，那么在IE内核的视窗下，非固定区引入页面底部内容将被隐藏，无法完整显示。为了使非固定区中引入的“shouye.html”页面能够得到完整的显示，通过为非固定区设置底边页边距(高度H)的方式，在非固定区的底端显示被剪切区域的内容。本发明明层叠样式表实现非固定区域随浏览器的高度/宽度自适应方法兼容IE内核浏览器，如：ie6，ie7，ie8等。
为非固定区设置内边距属性：*padding-bottom:H px；其中H值等于页面固定区的高度值(76px)，星号表示只有IE浏览器识别。
<head>
<meta content＝″text/html；charset＝utf-8″http-equiv＝″Content-Type″/>
<title>非固定区高度自适应</title>
<style type＝″text/css″>
</style>
</head>
<body style＝″*padding-bottom:76px；″>
<div style＝″font-size:28px；height:2000px；″>
非固定内容区域
</div>
这是是内容页最底部
</body>
</html>
本实施例最终的实施效果图如图4所示。
实施例1的完整程序代码如下：
<head>
<meta http-equiv＝″Content-Type″content＝″text/html；charset＝utf-8″/>
<title>无标题1</title>
<style type＝″text/css″>
*{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>
<body scrolling＝″no″>
<table height＝″100％″width＝″100％″cellpadding＝″0″cellspacing＝″0″>
<tr>
<td height＝″76px″colspan＝″2″style＝″background-color:black″>
<div class＝″head″style＝″color:white″>
我是顶部固定区域
</div>
</td>
</tr>
<tr>
<td valign＝″top″style＝″height:100％；″>
<div class＝″left″style＝″display:inline；float:left；margin-left:-160px；
height:100％；position:absolute；top:0；bottom:0；width:160px；background:gray″>
我是左侧固定区域
</div>
</td>
<td height＝″100％″valign＝″top″>
<iframe scrolling＝″yes″frameborder＝″0″src＝″shouye.html″
style＝″overflow:visible；width:100％；height:100％；″marginwidth＝″0″
marginheight＝″0″></iframe>
</td>
</tr>
</table>
</body>
</html>
实施例2：
如图6所示，为本发明第二实施例在可视内容区内的实施效果示意图，本实施例与实施例1的区别仅在于，将预留区设置在第一页面区的右侧，非固定区的高度及宽度随浏览器的高度/宽度自适应的实施原理及方法与实施例1相同，不再详述。
实施例3：
参见图8所示，为本发明第三实施例在可视内容区内的实施效果示意图，本实施例与实施例1的区别在于，预留区域设置在第一页面区的顶端，高度为H，第一固定区及第二固定区设置在第一页面区的左侧，二者合并为页面固定区，宽度为W。
结合图7本发明第三实施例的步骤流程图，本发明第三实施例的具体实施过程如下：
一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，包括以下步骤：
步骤S201：对可视内容区内设置第一页面区，第一页面区距可视内容区的顶端预留一个预留区；
步骤S202：在第一页面区中用table标签划分两行两列的四个区域，其中两个分别为第一固定区和第二固定区，另两个分别为第一可移动区和第二可移动区；第一固定区和第二固定区位于第一页面区的左侧，两个可移动区位于第一页面区的右侧，其中，邻近预留区的为第一可移动区，另一个为第二可移动区；设置所述两个页面固定区的宽度值，并设置table的高度及宽度100％继承第一页面区的高度及宽度；
步骤S203：将第一可移动区移动到预留区，形成预留固定区；
步骤S204：第二可移动区自动填充第一可移动区，形成非固定区；非固定区的宽度100％继承第二可移动区的宽度，使得非固定区的右边缘与第一页面区的右边缘平齐，非固定区的高度100％继承第一页面区的高度，使得非固定区的上、下边缘与第一页面区的上、下边缘平齐，从而实现非固定区的宽度及高度随浏览器的高度/宽度自适应。
其中步骤S201又包括S2011及步骤S2012两个子步骤：
步骤S2011：在可视内容区内，将可视内容区的顶端向内收缩一个高度值，形成第一页面区，收缩的区域为预留区，所述预留区呈横向贯穿整个可视内容区；
步骤S2012：将第一页面区设置为，如果第一页面区超出可视内容区，则超出部分被剪切，且第一页面区的宽度100％继承可视内容区的宽度，实现第一页面区的左、右边缘与浏览器左、右边缘平齐。
步骤S202又包括S2021及步骤S2022两个子步骤：
步骤S2021：将第一固定区与第二固定区合并为页面固定区，该页面固定区垂直相交于所述预留区，并设置该页面固定区的宽度值；
步骤S2022：table100％继承第一页面区的高度及宽度属性，使得table划分的所述四个区域的边缘分别与第一页面区的边缘平齐。
在步骤S203中设置第一可移动区绝对定位在预留区的位置，其高度与步骤S2011中的预留区的高度值相等，形成预留固定区，并设置该预留固定区的顶端与第一页面区平齐。
还包括步骤S205：设定该非固定区显示的内容。
还包括步骤S206：当浏览器为非IE内核解析时，非固定区宽度与第二可移动区的宽度相等，在非固定区中能够完整显示引入的“shouye.html”页面；当浏览器为IE内核解析时，设置非固定区引入页面的内边距与所述页面固定区域的宽度值相同，仅供IE浏览器识别，实现在非固定区中完整显示引入的页面。
应当理解，这里描述的实施例是示意性的而非限制性的。本领域技术人员通过阅读说明书，可以对本发明的技术方案有更好的了解，并可以在本发明的精神和宗旨下对本发明的实施例进行各种修改和变型。本发明的保护范围仅由随附权利要求书限定。
Claims (12)
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％继承第一页面区的高度，使得非固定区的上、下边缘与第一页面区的上、下边缘平齐，从而实现非固定区的宽度及高度随浏览器的高度/宽度自适应。
8.如权利要求7所述的一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，其特征在于，步骤S201包括：
步骤S2011：在可视内容区内，将可视内容区的顶端向内收缩一个高度值，形成第一页面区，收缩的区域为预留区，所述预留区呈横向贯穿整个可视内容区；
步骤S2012：将第一页面区设置为，如果第一页面区超出可视内容区，则超出部分被剪切，且第一页面区的宽度100％继承可视内容区的宽度，实现第一页面区的左、右边缘与浏览器左、右边缘平齐。
9.如权利要求7所述的一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，其特征在于，步骤S202包括：
步骤S2021：将第一固定区与第二固定区合并为页面固定区，该页面固定区垂直相交于所述预留区，并设置该页面固定区的宽度值；
步骤S2022：table100％继承第一页面区的高度及宽度属性，使得table划分的所述四个区域的边缘分别与第一页面区的边缘平齐。
10.如权利要求8所述的一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，其特征在于，在步骤S203中设置第一可移动区绝对定位在预留区的位置，其高度与步骤S2011中的预留区的高度值相等，形成预留固定区，并设置该预留固定区的顶端与第一页面区平齐。
11.如权利要求7-10任一项所述的一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，其特征在于，还包括步骤S205：设定该非固定区显示的内容。
12.如权利要求11所述的一种层叠样式表实现非固定区域随浏览器高/宽度自适应方法，其特征在于，还包括步骤S206：当浏览器为非IE内核解析时，非固定区宽度与第二可移动区的宽度相等，在非固定区中能够完整显示引入的页面；当浏览器为IE内核解析时，设置非固定区引入页面的内边距与所述页面固定区域的宽度值相同，仅供IE浏览器识别，实现在非固定区中完整显示引入的页面。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010105539551A CN102012787B (zh) | 2010-11-19 | 2010-11-19 | 层叠样式表实现非固定区域随浏览器高/宽度自适应方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010105539551A CN102012787B (zh) | 2010-11-19 | 2010-11-19 | 层叠样式表实现非固定区域随浏览器高/宽度自适应方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102012787A true CN102012787A (zh) | 2011-04-13 |
| CN102012787B CN102012787B (zh) | 2012-12-05 |
Family
ID=43842965
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2010105539551A Active CN102012787B (zh) | 2010-11-19 | 2010-11-19 | 层叠样式表实现非固定区域随浏览器高/宽度自适应方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102012787B (zh) |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104216909A (zh) * | 2013-06-04 | 2014-12-17 | 腾讯科技（深圳）有限公司 | 网页数据处理方法及处理装置 |
| CN105279162A (zh) * | 2014-06-12 | 2016-01-27 | 腾讯科技（深圳）有限公司 | 页面顶部输入框调整方法及装置 |
| WO2016168983A1 (en) * | 2015-04-21 | 2016-10-27 | Guangzhou Ucweb Computer Technology Co., Ltd. | Method and electronic device for displaying web page |
| CN106325890A (zh) * | 2016-10-25 | 2017-01-11 | 国云科技股份有限公司 | 基于纯html+css代码创建网页后台自适应布局方法 |
| CN106610824A (zh) * | 2015-10-23 | 2017-05-03 | 北京国双科技有限公司 | 一种页面高度自适应的方法及装置 |
| CN106959973A (zh) * | 2016-01-12 | 2017-07-18 | 阿里巴巴集团控股有限公司 | 一种网页展示方法及系统、用户设备 |
| CN107256142A (zh) * | 2017-04-21 | 2017-10-17 | 腾讯科技（深圳）有限公司 | 一种页面显示的方法及终端 |
| CN107368276A (zh) * | 2017-08-28 | 2017-11-21 | 郑州云海信息技术有限公司 | 一种显示控制方法及装置 |
| CN108153575A (zh) * | 2018-01-19 | 2018-06-12 | 深圳市富途网络科技有限公司 | 一种用于可变宽度软件界面的按钮控件自适应布设方法 |
| CN108415985A (zh) * | 2018-02-11 | 2018-08-17 | 西安西点信息技术有限公司 | 一种用户设备上html网页的适配方法 |
| CN110955473A (zh) * | 2018-09-26 | 2020-04-03 | 北京国双科技有限公司 | 显示加载提示信息的方法及装置 |
| CN114296852A (zh) * | 2021-12-28 | 2022-04-08 | 挂号网（杭州）科技有限公司 | 一种显示目标页面的方法、装置、电子设备及存储介质 |
| CN114661213A (zh) * | 2022-03-01 | 2022-06-24 | 携程旅游网络技术（上海）有限公司 | 基于移动端的页面展示交互方法、系统、设备和介质 |
| CN114895993A (zh) * | 2022-01-20 | 2022-08-12 | 德明通讯（上海）股份有限公司 | 一种基于显示屏幕智能自适应的设计方法 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6185589B1 (en) * | 1998-07-31 | 2001-02-06 | Hewlett-Packard Company | Automatic banner resizing for variable-width web pages using variable width cells of HTML table |
| CN101140496A (zh) * | 2007-10-23 | 2008-03-12 | 深圳市迅雷网络技术有限公司 | 一种调整网页中栏框的方法及装置 |
| US20090089668A1 (en) * | 2007-09-28 | 2009-04-02 | Yahoo! Inc. | System and method of automatically sizing and adapting a widget to available space |
-
2010
- 2010-11-19 CN CN2010105539551A patent/CN102012787B/zh active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6185589B1 (en) * | 1998-07-31 | 2001-02-06 | Hewlett-Packard Company | Automatic banner resizing for variable-width web pages using variable width cells of HTML table |
| US20090089668A1 (en) * | 2007-09-28 | 2009-04-02 | Yahoo! Inc. | System and method of automatically sizing and adapting a widget to available space |
| CN101140496A (zh) * | 2007-10-23 | 2008-03-12 | 深圳市迅雷网络技术有限公司 | 一种调整网页中栏框的方法及装置 |
Cited By (20)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104216909B (zh) * | 2013-06-04 | 2018-10-02 | 腾讯科技（深圳）有限公司 | 网页数据处理方法及处理装置 |
| CN104216909A (zh) * | 2013-06-04 | 2014-12-17 | 腾讯科技（深圳）有限公司 | 网页数据处理方法及处理装置 |
| CN105279162A (zh) * | 2014-06-12 | 2016-01-27 | 腾讯科技（深圳）有限公司 | 页面顶部输入框调整方法及装置 |
| CN105279162B (zh) * | 2014-06-12 | 2019-06-28 | 腾讯科技（深圳）有限公司 | 页面顶部输入框调整方法及装置 |
| WO2016168983A1 (en) * | 2015-04-21 | 2016-10-27 | Guangzhou Ucweb Computer Technology Co., Ltd. | Method and electronic device for displaying web page |
| CN106610824A (zh) * | 2015-10-23 | 2017-05-03 | 北京国双科技有限公司 | 一种页面高度自适应的方法及装置 |
| CN106959973A (zh) * | 2016-01-12 | 2017-07-18 | 阿里巴巴集团控股有限公司 | 一种网页展示方法及系统、用户设备 |
| CN106325890A (zh) * | 2016-10-25 | 2017-01-11 | 国云科技股份有限公司 | 基于纯html+css代码创建网页后台自适应布局方法 |
| CN107256142A (zh) * | 2017-04-21 | 2017-10-17 | 腾讯科技（深圳）有限公司 | 一种页面显示的方法及终端 |
| CN107256142B (zh) * | 2017-04-21 | 2020-12-29 | 腾讯科技（深圳）有限公司 | 一种页面显示的方法及终端 |
| CN107368276B (zh) * | 2017-08-28 | 2020-09-08 | 苏州浪潮智能科技有限公司 | 一种显示控制方法及装置 |
| CN107368276A (zh) * | 2017-08-28 | 2017-11-21 | 郑州云海信息技术有限公司 | 一种显示控制方法及装置 |
| CN108153575A (zh) * | 2018-01-19 | 2018-06-12 | 深圳市富途网络科技有限公司 | 一种用于可变宽度软件界面的按钮控件自适应布设方法 |
| CN108415985A (zh) * | 2018-02-11 | 2018-08-17 | 西安西点信息技术有限公司 | 一种用户设备上html网页的适配方法 |
| CN108415985B (zh) * | 2018-02-11 | 2021-09-03 | 西安西点信息技术有限公司 | 一种用户设备上html网页的适配方法 |
| CN110955473A (zh) * | 2018-09-26 | 2020-04-03 | 北京国双科技有限公司 | 显示加载提示信息的方法及装置 |
| CN110955473B (zh) * | 2018-09-26 | 2023-10-31 | 北京国双科技有限公司 | 显示加载提示信息的方法及装置 |
| CN114296852A (zh) * | 2021-12-28 | 2022-04-08 | 挂号网（杭州）科技有限公司 | 一种显示目标页面的方法、装置、电子设备及存储介质 |
| CN114895993A (zh) * | 2022-01-20 | 2022-08-12 | 德明通讯（上海）股份有限公司 | 一种基于显示屏幕智能自适应的设计方法 |
| CN114661213A (zh) * | 2022-03-01 | 2022-06-24 | 携程旅游网络技术（上海）有限公司 | 基于移动端的页面展示交互方法、系统、设备和介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102012787B (zh) | 2012-12-05 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102012787B (zh) | 层叠样式表实现非固定区域随浏览器高/宽度自适应方法 | |
| US11769002B2 (en) | Extended data grid components with multi-level navigation | |
| CN102663126B (zh) | 一种在移动终端中显示网页的方法及装置 | |
| US8539342B1 (en) | Read-order inference via content sorting | |
| US20150205884A1 (en) | Emphasizing a portion of the visible content elements of a markup language document | |
| CN104217037B (zh) | 一种在移动终端中显示网页的方法及装置 | |
| CN108255923B (zh) | 图像展示方法、设备及电子设备 | |
| CN105069060B (zh) | 一种html文档分页排版方法 | |
| US8751924B2 (en) | Rule-based grid independent of content | |
| CN105335445A (zh) | 布局显示方法和装置 | |
| CN105760358A (zh) | 电子书版面重排和电子书展示的方法及其装置 | |
| CN109062885B (zh) | 文本框布局的调整方法、装置和设备 | |
| CN103970890B (zh) | 一种实时网页数据的生成方法及装置 | |
| CN103136175A (zh) | Epub格式读物的分页方法及系统 | |
| CN103294819B (zh) | 采用html5技术对网页内容进行分页显示的方法 | |
| CN103049430A (zh) | 一种基于idf格式文件的页面显示方法 | |
| US20070162848A1 (en) | Predictive styling | |
| CN110020291B (zh) | 网页布局的处理方法及装置 | |
| Weyl | What's new in CSS3 | |
| Ciesielska | Responsive web design–an explorative analysis from an aesthetic, functional and technical perspective | |
| Bessler | Delivering Precise Numbers and Alternative Views for Graphs Using SAS ODS HTML5 | |
| Attardi et al. | Basic CSS concepts | |
| Prabhu et al. | Grid Fundamentals and Helper Classes | |
| CN111104160B (zh) | 隶属关系展示方法、装置、电子设备和存储介质 | |
| Dowden et al. | Layouts |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| C56 | Change in the name or address of the patentee | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 100088, Crowne Plaza Zhongguancun Beijing, Haidian District, Beijing, 106, 8 floor, office building, Zhichun Road Patentee after: BEIJING HUDONG BAIKE NETWORK TECHNOLOGY CO.,LTD. Address before: 100088, Crowne Plaza Zhongguancun Beijing, Haidian District, Beijing, 106, 8 floor, office building, Zhichun Road Patentee before: Hudong Online (Beijing) Technology Co.,Ltd. |
|
| CP01 | Change in the name or title of a patent holder | ||
| CP01 | Change in the name or title of a patent holder |
Address after: 100088, Crowne Plaza Zhongguancun Beijing, Haidian District, Beijing, 106, 8 floor, office building, Zhichun Road Patentee after: Beijing Interactive Encyclopedia Network Technology Co.,Ltd. Address before: 100088, Crowne Plaza Zhongguancun Beijing, Haidian District, Beijing, 106, 8 floor, office building, Zhichun Road Patentee before: BEIJING HUDONG BAIKE NETWORK TECHNOLOGY CO.,LTD. |
|
| TR01 | Transfer of patent right | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20191008 Address after: 100041, room 2, building 3, building 30, Xing Xing street, Shijingshan District, Beijing, Patentee after: BEIJING BYTEDANCE NETWORK TECHNOLOGY Co.,Ltd. Address before: 100088, Crowne Plaza Zhongguancun Beijing, Haidian District, Beijing, 106, 8 floor, office building, Zhichun Road Patentee before: Beijing Interactive Encyclopedia Network Technology Co.,Ltd. |